Sign Up Sign Up
Pencil Sketch

Pencil Sketch

12-color palette · Warm · Light · Complementary harmony

Back to Library

Pencil Sketch

12-color palette · Warm temperature · Light tone · Complementary harmony

Modify
Vibrant 12 colors Warm Light Complementary pencilsketch
Likes 11
Colors 12

CSS variables

:root {
  --c-vibrant-1: #FFFFE0;
  --c-vibrant-2: #FCEF8D;
  --c-vibrant-3: #F6CE98;
  --c-vibrant-4: #F2A561;
  --c-vibrant-5: #D37B86;
  --c-vibrant-6: #FF2D55;
  --c-vibrant-7: #2DFF69;
  --c-vibrant-8: #AEFFD5;
  --c-vibrant-9: #5998FF;
  --c-vibrant-10: #202020;
  --c-vibrant-11: #606060;
  --c-vibrant-12: #808080;
}

About this palette

This 12-color vibrant palette runs from Winter Duvet (#FFFFE0) as its lightest tone to Lead (#202020) as its darkest. It blends Winter Duvet, The First Daffodil, Yellow Lotus, Shrimp Cocktail, Victorian Rouge, Reddish Pink, Synthetic Spearmint, Mintastic, Blue Chaos, Lead, Kettleman and Grey into a single set you can drop straight into a UI. Of its 66 color pairings, 12 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFFE0 on #202020 at 16.01:1.

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

Color breakdown

Winter Duvet #FFFFE0
RGB
rgb(255, 255, 224)
HSL
hsl(60, 100%, 94%)
Luminance
0.982
The First Daffodil #FCEF8D
RGB
rgb(252, 239, 141)
HSL
hsl(53, 95%, 77%)
Luminance
0.844
Yellow Lotus #F6CE98
RGB
rgb(246, 206, 152)
HSL
hsl(34, 84%, 78%)
Luminance
0.660
Shrimp Cocktail #F2A561
RGB
rgb(242, 165, 97)
HSL
hsl(28, 85%, 66%)
Luminance
0.467
Victorian Rouge #D37B86
RGB
rgb(211, 123, 134)
HSL
hsl(353, 50%, 65%)
Luminance
0.297
Reddish Pink #FF2D55
RGB
rgb(255, 45, 85)
HSL
hsl(349, 100%, 59%)
Luminance
0.238
Synthetic Spearmint #2DFF69
RGB
rgb(45, 255, 105)
HSL
hsl(137, 100%, 59%)
Luminance
0.731
Mintastic #AEFFD5
RGB
rgb(174, 255, 213)
HSL
hsl(149, 100%, 84%)
Luminance
0.853
Blue Chaos #5998FF
RGB
rgb(89, 152, 255)
HSL
hsl(217, 100%, 67%)
Luminance
0.318
Lead #202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
Luminance
0.014
Kettleman #606060
RGB
rgb(96, 96, 96)
HSL
hsl(0, 0%, 38%)
Luminance
0.117
Grey #808080
RGB
rgb(128, 128, 128)
HSL
hsl(0, 0%, 50%)
Luminance
0.216

Contrast & accessibility

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

Aa #FFFFE0 on #202020 16.01:1 AAA
Aa #AEFFD5 on #202020 14.02:1 AAA
Aa #FCEF8D on #202020 13.87:1 AAA
Aa #2DFF69 on #202020 12.12:1 AAA
Aa #F6CE98 on #202020 11.02:1 AAA
Aa #F2A561 on #202020 8.01:1 AAA
Aa #FFFFE0 on #606060 6.18:1 AA
Aa #5998FF on #202020 5.71:1 AA
Aa #AEFFD5 on #606060 5.41:1 AA
Aa #D37B86 on #202020 5.39:1 AA
Aa #FCEF8D on #606060 5.35:1 AA
Aa #2DFF69 on #606060 4.68:1 AA
Aa #FF2D55 on #202020 4.47:1 AA Large
Aa #F6CE98 on #606060 4.25:1 AA Large
Aa #202020 on #808080 4.13:1 AA Large
Aa #FFFFE0 on #808080 3.88:1 AA Large
Aa #FFFFE0 on #FF2D55 3.58:1 AA Large
Aa #AEFFD5 on #808080 3.40:1 AA Large
Aa #FCEF8D on #808080 3.36:1 AA Large
Aa #FF2D55 on #AEFFD5 3.14:1 AA Large
Aa #FCEF8D on #FF2D55 3.10:1 AA Large
Aa #F2A561 on #606060 3.09:1 AA Large
Aa #FFFFE0 on #D37B86 2.97:1 Fail
Aa #2DFF69 on #808080 2.94:1 Fail
Aa #FFFFE0 on #5998FF 2.80:1 Fail
Aa #FF2D55 on #2DFF69 2.71:1 Fail
Aa #F6CE98 on #808080 2.67:1 Fail
Aa #D37B86 on #AEFFD5 2.60:1 Fail
Aa #202020 on #606060 2.59:1 Fail
Aa #FCEF8D on #D37B86 2.57:1 Fail
Aa #F6CE98 on #FF2D55 2.47:1 Fail
Aa #AEFFD5 on #5998FF 2.45:1 Fail
Aa #FCEF8D on #5998FF 2.43:1 Fail
Aa #D37B86 on #2DFF69 2.25:1 Fail
Aa #5998FF on #606060 2.20:1 Fail
Aa #2DFF69 on #5998FF 2.12:1 Fail
Aa #D37B86 on #606060 2.08:1 Fail
Aa #F6CE98 on #D37B86 2.04:1 Fail
Aa #FFFFE0 on #F2A561 2.00:1 Fail
Aa #F2A561 on #808080 1.94:1 Fail
Aa #F6CE98 on #5998FF 1.93:1 Fail
Aa #F2A561 on #FF2D55 1.79:1 Fail
Aa #F2A561 on #AEFFD5 1.75:1 Fail
Aa #FCEF8D on #F2A561 1.73:1 Fail
Aa #FF2D55 on #606060 1.72:1 Fail
Aa #606060 on #808080 1.59:1 Fail
Aa #F2A561 on #2DFF69 1.51:1 Fail
Aa #F2A561 on #D37B86 1.49:1 Fail
Aa #FFFFE0 on #F6CE98 1.45:1 Fail
Aa #F2A561 on #5998FF 1.40:1 Fail
Aa #5998FF on #808080 1.38:1 Fail
Aa #F6CE98 on #F2A561 1.37:1 Fail
Aa #FFFFE0 on #2DFF69 1.32:1 Fail
Aa #D37B86 on #808080 1.31:1 Fail
Aa #FF2D55 on #5998FF 1.28:1 Fail
Aa #F6CE98 on #AEFFD5 1.27:1 Fail
Aa #FCEF8D on #F6CE98 1.26:1 Fail
Aa #D37B86 on #FF2D55 1.21:1 Fail
Aa #2DFF69 on #AEFFD5 1.16:1 Fail
Aa #FFFFE0 on #FCEF8D 1.15:1 Fail
Aa #FFFFE0 on #AEFFD5 1.14:1 Fail
Aa #FCEF8D on #2DFF69 1.14:1 Fail
Aa #F6CE98 on #2DFF69 1.10:1 Fail
Aa #FF2D55 on #808080 1.08:1 Fail
Aa #D37B86 on #5998FF 1.06:1 Fail
Aa #FCEF8D on #AEFFD5 1.01:1 Fail

Similar palettes

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 colors
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 colors
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 colors
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 colors
#F38181 #FCE38A #EAFFD0 #95E1D3
4 colors
#B7C4CF #EEE3CB #D7C0AE #967E76
4 colors
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 colors
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 colors