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

Visual Disorder Description Population affected Simulation Normal vision
Achromatopsia Total colour blindness Very rare achronmatopsia normal
Protanopia Red blindness 1% of men protanopia normal
Deuteranopia Green blindness 1% of men deuteranopia normal
Tritanopia Blue blindness Less than 1% of men and women tritanopia normal
Protanomaly Red weakness

1% of men,

0.01% of women

deuteranomaly normal
Deuteranomaly Green weakness

6% of men,

0.4% of women

tritanomaly normal
Tritanomaly Blue weakness Less than 0.01% of men and women normal normal

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