Fretboard and chord diagram

The appearance of the chords can be changed by a lot of options. Please browse the settings.

• The fretboard and the chord diagrams can show alternative information: Notes, finger positions, … (chord settings)
• The fretboard and the chord diagrams can be presented for right and left-handed people (general setting)
• Color schemes can help you to distinguish the different notes or intervals of chords, arpeggios, scales and the circle of fifths at a glance. smartChord offers different color combinations and (appearance settings) and a custom color scheme.
• Fret markers are optional and can be defined with color and position for each instrument individually (instrument settings)
• In most screens you can change the size of the chord diagrams using the pinch gesture or use the handlebar to resize a chord gallery.

How to read a chord diagram

A chord diagram is a visual representation of the guitar neck (fretboard). It is a simplified way to visually represent how to play a chord on the guitar, showing the strings, frets, and optionally the finger placements.

Basic structure of the chord diagram

• Horizontal lines = the guitar strings (from top to bottom, these represent the strings of the guitar: high E, B, G, D, A, and low E for standard tuning).
  • Top line = high E string (the thinnest string).
  • Bottom line = low E string (the thickest string).
• Vertical lines = the frets. The first vertical line represents the nut of the guitar (where the strings begin), and the following vertical lines represent each fret.
• Dots (●) = These represent where you place your fingers on the fretboard.The dot tells you which fret to press on which string.
• Unplayed strings (X) = Strings that should not be played. These are marked with an “X” on the nut.
• If there is no ● and no X an a string, play the string open (without pressing any fret)
• When fingering positions are shown on the diagram, it helps you understand which fingers to use on which strings and frets for the most efficient and ergonomic playing.
  • 1 = index finger
  • 2 = middle finger
  • 3 = ring finger
  • 4 = pinky

Examples

The following gallery shows nine chord diagrams with different settings:

• Right-hand mode is the default
• Left-hand mode
• Active appearance setting Mark open strings
• Bright app theme
• Other color scheme
• Fingering information
• Active appearance setting Semitones smaller
• Tuning with capo
• Tuning with shortened string

Fretboard information

Chord shapes differ not only in how they are played, but also in their structure and the composition of the chord itself.

You can display useful information on the fretboard diagram — such as note names, relative notes (degrees), intervals, or even the most suitable fingering positions. The information are

Use the ‘C on string’ button (a C in a dot on a string) to switch between these different information on the chord diagram at any time.

• Nothing
• Notes (Settings): Note names according to your settings
• Notes (Theory): Note names according to the music theory
• Intervals
• Relative notes (degree)
• Fingering (the most suitable fingering position)

Please note: This information may not be visible when chord diagrams are shown at a small size — for example, in the chord gallery. However, if you enlarge the gallery (and thereby the diagrams), the information will appear.

Chord gallery

The Chord gallery can show you multiple chord diagrams at once and is horizontally scrollable. Normally it shows small chord diagrams. There is a small handle (normally) above the gallery. Click and drag it to change the size of the gallery and hence the chord diagrams.

The Chord gallery can contain the fingerings for a chord. Or the chords of a song. The sort order depends on the tool where it is used.

A click on the chord gallery plays the chord if option “Sound” is enabled in general “Sound settings”.

A long click on a selected diagram opens a context-sensitive menu. The content of the menu depends on the tool where the gallery is embedded.

Left-hand mode

Are you left-handed and prefer a left-handed fretboard? Go to the general settings and activate the Left-hand mode.

Color schemes

Color schemes help you to distinguish the different notes or intervals of chords, arpeggios, scales, the circle of fifths or piano at a glance. smartChord offers different color combinations and a custom color scheme. You can select your color scheme in the ‘Appearance’ settings.

Color scheme binding

There is an option ‘Color scheme binding (Note)’ in the ‘Appearance’ settings. When activated, each color of the color scheme is associated to a note, otherwise to an interval.

In the example below, the image on the right shows the Circle of Fifths with an active ‘Color scheme binding (Note)’.

Custom color scheme

You can create your own color scheme in the “Appearance” settings. There you can define the color for each degree or note. The color of the text can also be adjusted. Whether the color is bound to the degree or the note is determined by the general appearance setting ‘Color scheme binding’. The custom color scheme is always listed at the end of the list.

The color scheme is used in:
◾ Chord diagrams
◾ Circle of fifths
◾ Fretboard representations
◾ Piano
◾ Scale-circle

App themes

You have the freedom to select from approximately 40 light and dark app themes based on your personal preferences. It’s important to note that these themes vary in terms of contrast and readability, ensuring that you can find the perfect balance for your visual comfort and usability.

Home-screen

You can define the color of each tool icon on the home-screen. Do a long-click on the icon and use the menu to open the color dialog to define the color for the icon. The color dialog lists the already used colors on the home screen, or initially the colors of the theme. Select the color white in a dark theme to remove the color from the tool again. In a bright theme, select the color black.

Songbook appearance

The songbook offers additional options for customising the appearance with color variants, fonts and modes.

Color Selection Dialog

The color dialog allows you to choose any color using several intuitive options:

• Pick a color using the color picker
• Select from predefined HTML colors in the dropdown menu
• Choose from your recently used colors
• Enter a hexadecimal color code directly (e.g., #FF5733)

A brightness slider lets you fine-tune the intensity of your selected color, and a live preview shows the final result instantly.