Sign Up Sign Up
Fluffy

Fluffy

12-color palette · Cool · Dark · Triadic harmony

Back to Library

Fluffy

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

Modify
Muted 12 colors Cool Dark Triadic saturated 12
Likes 7
Colors 12

CSS variables

:root {
  --c-muted-1: #16171A;
  --c-muted-2: #36354D;
  --c-muted-3: #566C86;
  --c-muted-4: #430067;
  --c-muted-5: #5D275D;
  --c-muted-6: #3F48C2;
  --c-muted-7: #448DE7;
  --c-muted-8: #10D275;
  --c-muted-9: #A7F547;
  --c-muted-10: #D62411;
  --c-muted-11: #FF8426;
  --c-muted-12: #FFEB33;
}

About this palette

This 12-color muted palette runs from Yellow-Bellied (#FFEB33) as its lightest tone to Piano Black (#16171A) as its darkest. It blends Piano Black, Tiě Hēi Metal, Aurora Borealis, Royal Purple, Charisma, Kikorangi Blue, Oregon Blue, Seaweed, Kiwi Pulp, Run Lola Run, Fluorescent Red Orange and Yellow-Bellied into a single set you can drop straight into a UI. Of its 66 color pairings, 18 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #16171A on #FFEB33 at 14.67:1.

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

Color breakdown

Piano Black #16171A
RGB
rgb(22, 23, 26)
HSL
hsl(225, 8%, 9%)
Luminance
0.009
Tiě Hēi Metal #36354D
RGB
rgb(54, 53, 77)
HSL
hsl(243, 18%, 25%)
Luminance
0.039
Aurora Borealis #566C86
RGB
rgb(86, 108, 134)
HSL
hsl(213, 22%, 43%)
Luminance
0.144
Royal Purple #430067
RGB
rgb(67, 0, 103)
HSL
hsl(279, 100%, 20%)
Luminance
0.022
Charisma #5D275D
RGB
rgb(93, 39, 93)
HSL
hsl(300, 41%, 26%)
Luminance
0.046
Kikorangi Blue #3F48C2
RGB
rgb(63, 72, 194)
HSL
hsl(236, 52%, 50%)
Luminance
0.096
Oregon Blue #448DE7
RGB
rgb(68, 141, 231)
HSL
hsl(213, 77%, 59%)
Luminance
0.261
Seaweed #10D275
RGB
rgb(16, 210, 117)
HSL
hsl(151, 86%, 44%)
Luminance
0.475
Kiwi Pulp #A7F547
RGB
rgb(167, 245, 71)
HSL
hsl(87, 90%, 62%)
Luminance
0.740
Run Lola Run #D62411
RGB
rgb(214, 36, 17)
HSL
hsl(6, 85%, 45%)
Luminance
0.156
Fluorescent Red Orange #FF8426
RGB
rgb(255, 132, 38)
HSL
hsl(26, 100%, 57%)
Luminance
0.379
Yellow-Bellied #FFEB33
RGB
rgb(255, 235, 51)
HSL
hsl(54, 100%, 60%)
Luminance
0.809

Contrast & accessibility

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

Aa #16171A on #FFEB33 14.67:1 AAA
Aa #16171A on #A7F547 13.48:1 AAA
Aa #430067 on #FFEB33 11.98:1 AAA
Aa #430067 on #A7F547 11.01:1 AAA
Aa #36354D on #FFEB33 9.69:1 AAA
Aa #5D275D on #FFEB33 8.98:1 AAA
Aa #16171A on #10D275 8.96:1 AAA
Aa #36354D on #A7F547 8.91:1 AAA
Aa #5D275D on #A7F547 8.25:1 AAA
Aa #16171A on #FF8426 7.32:1 AAA
Aa #430067 on #10D275 7.32:1 AAA
Aa #430067 on #FF8426 5.98:1 AA
Aa #36354D on #10D275 5.92:1 AA
Aa #3F48C2 on #FFEB33 5.89:1 AA
Aa #5D275D on #10D275 5.49:1 AA
Aa #3F48C2 on #A7F547 5.41:1 AA
Aa #16171A on #448DE7 5.30:1 AA
Aa #36354D on #FF8426 4.84:1 AA
Aa #5D275D on #FF8426 4.48:1 AA Large
Aa #566C86 on #FFEB33 4.42:1 AA Large
Aa #430067 on #448DE7 4.33:1 AA Large
Aa #D62411 on #FFEB33 4.17:1 AA Large
Aa #566C86 on #A7F547 4.07:1 AA Large
Aa #A7F547 on #D62411 3.83:1 AA Large
Aa #3F48C2 on #10D275 3.60:1 AA Large
Aa #16171A on #D62411 3.52:1 AA Large
Aa #36354D on #448DE7 3.50:1 AA Large
Aa #16171A on #566C86 3.32:1 AA Large
Aa #5D275D on #448DE7 3.24:1 AA Large
Aa #3F48C2 on #FF8426 2.94:1 Fail
Aa #430067 on #D62411 2.87:1 Fail
Aa #448DE7 on #FFEB33 2.77:1 Fail
Aa #566C86 on #430067 2.71:1 Fail
Aa #566C86 on #10D275 2.70:1 Fail
Aa #10D275 on #D62411 2.55:1 Fail
Aa #448DE7 on #A7F547 2.54:1 Fail
Aa #16171A on #3F48C2 2.49:1 Fail
Aa #36354D on #D62411 2.32:1 Fail
Aa #566C86 on #FF8426 2.21:1 Fail
Aa #36354D on #566C86 2.19:1 Fail
Aa #5D275D on #D62411 2.15:1 Fail
Aa #3F48C2 on #448DE7 2.13:1 Fail
Aa #D62411 on #FF8426 2.08:1 Fail
Aa #566C86 on #5D275D 2.03:1 Fail
Aa #430067 on #3F48C2 2.03:1 Fail
Aa #FF8426 on #FFEB33 2.00:1 Fail
Aa #A7F547 on #FF8426 1.84:1 Fail
Aa #448DE7 on #10D275 1.69:1 Fail
Aa #36354D on #3F48C2 1.65:1 Fail
Aa #10D275 on #FFEB33 1.64:1 Fail
Aa #16171A on #5D275D 1.63:1 Fail
Aa #566C86 on #448DE7 1.60:1 Fail
Aa #5D275D on #3F48C2 1.52:1 Fail
Aa #16171A on #36354D 1.51:1 Fail
Aa #448DE7 on #D62411 1.51:1 Fail
Aa #10D275 on #A7F547 1.50:1 Fail
Aa #3F48C2 on #D62411 1.41:1 Fail
Aa #448DE7 on #FF8426 1.38:1 Fail
Aa #566C86 on #3F48C2 1.33:1 Fail
Aa #430067 on #5D275D 1.33:1 Fail
Aa #36354D on #430067 1.24:1 Fail
Aa #16171A on #430067 1.22:1 Fail
Aa #10D275 on #FF8426 1.22:1 Fail
Aa #A7F547 on #FFEB33 1.09:1 Fail
Aa #36354D on #5D275D 1.08:1 Fail
Aa #566C86 on #D62411 1.06:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors