Use the Color Picker

The Color Picker dialogue gives you a wide array of options to define the perfect colour for your map's features, labels and background.

     This dialogue is divided into the following sections:

          - Color Gradient Box,

          - HSB - Hue / Saturation / Brightness,

          - RGB - Red / Green / Blue,

          - CMYK - Cyan / Magenta / Yellow / Black,

          - Theme Colors and Standard Colors,

          - Custom Colors,

          - Color Picker,

          - Accessibility,

  color_picker

Colour Gradient Box

     Click and drag the white circle. The three different ways to represent a colour numerically (HSB, RGB and CMYK) will adjust automatically. You can also adjust specific aspects of the colour using the properties below the gradient box. Edit a value directly or use the radio buttons. To select the aspect to appear in the slider bar to the right of the colour gradient box.

color

HSB - Hue / Saturation / Brightness

rgb

     Hue is a degree on the colour wheel from 0° to 360°: 0° is red, 120° is green, 240° is blue.

hue

     Saturation is a percentage value: 0% means a shade of gray and 100% is the full colour.

saturation

     Brightness is a percentage value: 0% is black, 100% is white.

brightness

RGB - Red / Green / Blue

     Each parameter defines the intensity of the respective colour as an integer between 0 and 255. Computer screens display colours using RGB colour values.

rgb

     The RGB values can be represented as a single hexadecimal value. A value is specified using #RRGGBB with RR (red), GG (green) and BB (blue) hexadecimal values between 00 (lowest value) and FF (highest value).

color-code

CMYK - Cyan / Magenta / Yellow / Black

     Each parameter defines the intensity of the respective colour as a percentage between 0 and 100. Printers often present colours using CMYK colour values.

cmyk

Theme Colors and Standard Colors

     Select one of the predefined Theme Colors or Standard Colors.

theme-colors

Custom Colour

     Select one of your own Custom Colors. Select a colour box in the Custom Colors section, create a colour using the colour gradient box or the colour codes and click Add New to Custom Colors to save a colour you wish to reuse in the future.

custom-color

 Color Picker

     color-picker

     Click and hold on to the eyedropper icon. Then move the mouse around your screen. The colour under the mouse appears in the top portion of the pop-up and a magnified view of where the mouse appears in the bottom portion.

color-picker-pixel

Accessibility

     About 8% of men and 0.5% of women are born with some form of colorblindness. Use the Accessibility options to assist in selecting colours.

accessibility

Colour Analysis

     Use the Color Analysis statistics to obtain a colour respecting the Web Content Accessibility Guidelines (WCAG) 2.0 level AA.

  • Contrast: Ratio between the foreground colour and background colour using the colour luminance values.
  • Brightness Ratio: Color brightness is determined by the following formula:
    ((red value X 299) + (green value X 587) + (blue value X 114)) / 1000
    Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour. The range for colour brightness difference is 125.
  • Brightness Difference: You get a brightness difference by subtracting the brightness value of the background from the brightness value of the text:
    text brightness - background brightness = brightness difference
    If the background is brighter than the text, for example, black text on white, then the brightness difference will, of course, be a negative number. With 10 pt text results that are outside of a range of -80 to 80 in the brightness difference are moderately readable.
  • Color Difference: Color difference is determined by the following formula:
    (maximum (red value 1, red value 2) - minimum (red value 1, red value 2)) +
    (maximum (green value 1, red value 2) - minimum (green value 1, red value 2)) +
    (maximum (blue value 1, red value 2) - minimum (blue value 1, red value 2))
    The range for color difference is 500.
  • WCAG 2 AA Compliant: The colour contrast ratio changes from 1:1 (no contrast, e.g., black text on a black background) to 21:1 (maximum contrast, e.g., black text on a white background). To be AA compliant, the ratio must be 4,5:1 or more.
    accessibility