Skip to content

03 — PrimaryStyle v2.2

Colour

Black and white as the main colours, with additional for accents, warnings and more. Click the values to copy.

Foundations

Most surfaces are white type on a black background.

Black
Use
Default background
HEX
OKLCH
White
Use
Default text & logo
HEX
OKLCH

Primaries

Using the default 500-values of each Tailwind colour. Contrast values show WCAG compliance for white and black.

  • Red-500

    HEX
    OKLCH
    Contrast
    3.8 AA Large 5.5 AA

  • Orange-500

    HEX
    OKLCH
    Contrast
    2.9 Fail 7.3 AAA

  • Yellow-500

    HEX
    OKLCH
    Contrast
    1.9 Fail 11.0 AAA

  • Green-500

    HEX
    OKLCH
    Contrast
    2.2 Fail 9.5 AAA

  • Blue-500

    HEX
    OKLCH
    Contrast
    3.8 AA Large 5.6 AA
  • Accent

    Violet-500

    HEX
    OKLCH
    Contrast
    4.4 AA Large 4.8 AA

  • Neutral-500

    HEX
    OKLCH
    Contrast
    4.7 AA 4.4 AA Large

  • Indigo-500

    HEX
    OKLCH
    Contrast
    4.6 AA 4.6 AA

  • Teal-500

    HEX
    OKLCH
    Contrast
    2.4 Fail 8.7 AAA

Scales

Each primary colour's range between darkest and lightest. Click to copy.

Red

Orange

Yellow

Green

Blue

Violet

Neutral

Indigo

Teal