Sign Up Sign Up
SKYLINE 12

SKYLINE 12

12-color palette · Cool · Light · Triadic harmony

Back to Library

SKYLINE 12

12-color palette · Cool temperature · Light tone · Triadic harmony

Modify
Vibrant 12 colors Cool Light Triadic blue sky fresh ment
Likes 29
Colors 12

CSS variables

:root {
  --c-vibrant-1: #EEF3F7;
  --c-vibrant-2: #B2D6F7;
  --c-vibrant-3: #B2BEF7;
  --c-vibrant-4: #DEB2F7;
  --c-vibrant-5: #00FFD8;
  --c-vibrant-6: #00C9FF;
  --c-vibrant-7: #00A4FF;
  --c-vibrant-8: #0072FF;
  --c-vibrant-9: #8CB28C;
  --c-vibrant-10: #7B9490;
  --c-vibrant-11: #71828B;
  --c-vibrant-12: #71718A;
}

About this palette

This 12-color vibrant palette runs from Airport (#EEF3F7) as its lightest tone to Stormy Mauve (#71718A) as its darkest. It blends Airport, Blue Rice, Purple Illusion, Mauve, Ice Ice Baby, Vivid Sky Blue, Protoss Pylon, Brandeis Blue, Shaded Willow, Tile Green, Oyster Bay and Stormy Mauve into a single set you can drop straight into a UI. None of the 66 in-palette color pairings clear the WCAG AA contrast threshold (4.5:1), so pair these colors with black or white for body text.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Airport #EEF3F7
RGB
rgb(238, 243, 247)
HSL
hsl(207, 36%, 95%)
Luminance
0.890
Blue Rice #B2D6F7
RGB
rgb(178, 214, 247)
HSL
hsl(209, 81%, 83%)
Luminance
0.643
Purple Illusion #B2BEF7
RGB
rgb(178, 190, 247)
HSL
hsl(230, 81%, 83%)
Luminance
0.530
Mauve #DEB2F7
RGB
rgb(222, 178, 247)
HSL
hsl(278, 81%, 83%)
Luminance
0.541
Ice Ice Baby #00FFD8
RGB
rgb(0, 255, 216)
HSL
hsl(171, 100%, 50%)
Luminance
0.765
Vivid Sky Blue #00C9FF
RGB
rgb(0, 201, 255)
HSL
hsl(193, 100%, 50%)
Luminance
0.490
Protoss Pylon #00A4FF
RGB
rgb(0, 164, 255)
HSL
hsl(201, 100%, 50%)
Luminance
0.338
Brandeis Blue #0072FF
RGB
rgb(0, 114, 255)
HSL
hsl(213, 100%, 50%)
Luminance
0.193
Shaded Willow #8CB28C
RGB
rgb(140, 178, 140)
HSL
hsl(120, 20%, 62%)
Luminance
0.393
Tile Green #7B9490
RGB
rgb(123, 148, 144)
HSL
hsl(170, 10%, 53%)
Luminance
0.274
Oyster Bay #71828B
RGB
rgb(113, 130, 139)
HSL
hsl(201, 10%, 49%)
Luminance
0.213
Stormy Mauve #71718A
RGB
rgb(113, 113, 138)
HSL
hsl(240, 10%, 49%)
Luminance
0.172

Contrast & accessibility

0 of 66 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #EEF3F7 on #71718A 4.24:1 AA Large
Aa #EEF3F7 on #0072FF 3.88:1 AA Large
Aa #00FFD8 on #71718A 3.68:1 AA Large
Aa #EEF3F7 on #71828B 3.57:1 AA Large
Aa #00FFD8 on #0072FF 3.36:1 AA Large
Aa #B2D6F7 on #71718A 3.13:1 AA Large
Aa #00FFD8 on #71828B 3.09:1 AA Large
Aa #EEF3F7 on #7B9490 2.90:1 Fail
Aa #B2D6F7 on #0072FF 2.86:1 Fail
Aa #DEB2F7 on #71718A 2.67:1 Fail
Aa #B2D6F7 on #71828B 2.63:1 Fail
Aa #B2BEF7 on #71718A 2.62:1 Fail
Aa #00FFD8 on #7B9490 2.51:1 Fail
Aa #DEB2F7 on #0072FF 2.44:1 Fail
Aa #00C9FF on #71718A 2.44:1 Fail
Aa #EEF3F7 on #00A4FF 2.42:1 Fail
Aa #B2BEF7 on #0072FF 2.39:1 Fail
Aa #DEB2F7 on #71828B 2.24:1 Fail
Aa #00C9FF on #0072FF 2.23:1 Fail
Aa #B2BEF7 on #71828B 2.20:1 Fail
Aa #B2D6F7 on #7B9490 2.14:1 Fail
Aa #EEF3F7 on #8CB28C 2.12:1 Fail
Aa #00FFD8 on #00A4FF 2.10:1 Fail
Aa #00C9FF on #71828B 2.05:1 Fail
Aa #8CB28C on #71718A 2.00:1 Fail
Aa #00FFD8 on #8CB28C 1.84:1 Fail
Aa #0072FF on #8CB28C 1.83:1 Fail
Aa #DEB2F7 on #7B9490 1.82:1 Fail
Aa #B2D6F7 on #00A4FF 1.79:1 Fail
Aa #B2BEF7 on #7B9490 1.79:1 Fail
Aa #00A4FF on #71718A 1.75:1 Fail
Aa #EEF3F7 on #00C9FF 1.74:1 Fail
Aa #8CB28C on #71828B 1.68:1 Fail
Aa #00C9FF on #7B9490 1.67:1 Fail
Aa #EEF3F7 on #B2BEF7 1.62:1 Fail
Aa #00A4FF on #0072FF 1.60:1 Fail
Aa #EEF3F7 on #DEB2F7 1.59:1 Fail
Aa #B2D6F7 on #8CB28C 1.56:1 Fail
Aa #DEB2F7 on #00A4FF 1.52:1 Fail
Aa #00FFD8 on #00C9FF 1.51:1 Fail
Aa #B2BEF7 on #00A4FF 1.50:1 Fail
Aa #00A4FF on #71828B 1.47:1 Fail
Aa #7B9490 on #71718A 1.46:1 Fail
Aa #B2BEF7 on #00FFD8 1.40:1 Fail
Aa #00C9FF on #00A4FF 1.39:1 Fail
Aa #DEB2F7 on #00FFD8 1.38:1 Fail
Aa #8CB28C on #7B9490 1.37:1 Fail
Aa #EEF3F7 on #B2D6F7 1.36:1 Fail
Aa #0072FF on #7B9490 1.34:1 Fail
Aa #DEB2F7 on #8CB28C 1.33:1 Fail
Aa #B2BEF7 on #8CB28C 1.31:1 Fail
Aa #B2D6F7 on #00C9FF 1.28:1 Fail
Aa #7B9490 on #71828B 1.23:1 Fail
Aa #00C9FF on #8CB28C 1.22:1 Fail
Aa #00A4FF on #7B9490 1.20:1 Fail
Aa #B2D6F7 on #B2BEF7 1.19:1 Fail
Aa #71828B on #71718A 1.19:1 Fail
Aa #B2D6F7 on #00FFD8 1.18:1 Fail
Aa #B2D6F7 on #DEB2F7 1.17:1 Fail
Aa #EEF3F7 on #00FFD8 1.15:1 Fail
Aa #00A4FF on #8CB28C 1.14:1 Fail
Aa #DEB2F7 on #00C9FF 1.09:1 Fail
Aa #0072FF on #71828B 1.09:1 Fail
Aa #0072FF on #71718A 1.09:1 Fail
Aa #B2BEF7 on #00C9FF 1.07:1 Fail
Aa #B2BEF7 on #DEB2F7 1.02:1 Fail

Similar palettes

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE
4 colors
#F4EEFF #DCD6F7 #A6B1E1 #424874
4 colors
#B1B2FF #AAC4FF #D2DAFF #EEF1FF
4 colors
#6096B4 #93BFCF #BDCDD6 #EEE9DA
4 colors
#A8D8EA #AA96DA #FCBAD3 #FFFFD2
4 colors
#DEFCF9 #CADEFC #C3BEF0 #CCA8E9
4 colors
#F7FBFC #D6E6F2 #B9D7EA #769FCD
4 colors
#C4DFDF #D2E9E9 #E3F4F4 #F8F6F4
4 colors