Sign Up Sign Up
Fish Clouds

Fish Clouds

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

Fish Clouds

12-color palette · Cool temperature · Mixed tone · Complementary harmony

Modify
Earthy 12 colors Cool Mixed Complementary warm clouds fish beautiful
Likes 36
Colors 12

CSS variables

:root {
  --c-earthy-1: #1A2B3C;
  --c-earthy-2: #034453;
  --c-earthy-3: #27877C;
  --c-earthy-4: #439691;
  --c-earthy-5: #FBFBD2;
  --c-earthy-6: #E4C199;
  --c-earthy-7: #BF934A;
  --c-earthy-8: #6F574D;
  --c-earthy-9: #4F4343;
  --c-earthy-10: #A24817;
  --c-earthy-11: #FD782B;
  --c-earthy-12: #DE654A;
}

About this palette

This 12-color earthy palette runs from Utepils (#FBFBD2) as its lightest tone to Tangaroa (#1A2B3C) as its darkest. It blends Tangaroa, Crab Nebula, Emerald Whispers, Catalan, Utepils, Dapper Dingo, Tussock, Natural Bark, Black Garnet, Powdered Coffee, Temptatious Tangerine and Jelly Slug into a single set you can drop straight into a UI. Of its 66 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #1A2B3C on #FBFBD2 at 13.63:1.

Grounded, natural tones — suits sustainability/organic brands, coffee shops, outdoor gear, and warm editorial typography.

Color breakdown

Tangaroa #1A2B3C
RGB
rgb(26, 43, 60)
HSL
hsl(210, 40%, 17%)
Luminance
0.023
Crab Nebula #034453
RGB
rgb(3, 68, 83)
HSL
hsl(191, 93%, 17%)
Luminance
0.048
Emerald Whispers #27877C
RGB
rgb(39, 135, 124)
HSL
hsl(173, 55%, 34%)
Luminance
0.192
Catalan #439691
RGB
rgb(67, 150, 145)
HSL
hsl(176, 38%, 43%)
Luminance
0.251
Utepils #FBFBD2
RGB
rgb(251, 251, 210)
HSL
hsl(60, 84%, 90%)
Luminance
0.942
Dapper Dingo #E4C199
RGB
rgb(228, 193, 153)
HSL
hsl(32, 58%, 75%)
Luminance
0.569
Tussock #BF934A
RGB
rgb(191, 147, 74)
HSL
hsl(37, 48%, 52%)
Luminance
0.324
Natural Bark #6F574D
RGB
rgb(111, 87, 77)
HSL
hsl(18, 18%, 37%)
Luminance
0.107
Black Garnet #4F4343
RGB
rgb(79, 67, 67)
HSL
hsl(0, 8%, 29%)
Luminance
0.061
Powdered Coffee #A24817
RGB
rgb(162, 72, 23)
HSL
hsl(21, 75%, 36%)
Luminance
0.124
Temptatious Tangerine #FD782B
RGB
rgb(253, 120, 43)
HSL
hsl(22, 98%, 58%)
Luminance
0.345
Jelly Slug #DE654A
RGB
rgb(222, 101, 74)
HSL
hsl(11, 69%, 58%)
Luminance
0.253

Contrast & accessibility

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

Aa #1A2B3C on #FBFBD2 13.63:1 AAA
Aa #034453 on #FBFBD2 10.14:1 AAA
Aa #FBFBD2 on #4F4343 8.95:1 AAA
Aa #1A2B3C on #E4C199 8.51:1 AAA
Aa #034453 on #E4C199 6.33:1 AA
Aa #FBFBD2 on #6F574D 6.30:1 AA
Aa #FBFBD2 on #A24817 5.71:1 AA
Aa #E4C199 on #4F4343 5.59:1 AA
Aa #1A2B3C on #FD782B 5.43:1 AA
Aa #1A2B3C on #BF934A 5.15:1 AA
Aa #1A2B3C on #DE654A 4.17:1 AA Large
Aa #1A2B3C on #439691 4.13:1 AA Large
Aa #27877C on #FBFBD2 4.09:1 AA Large
Aa #034453 on #FD782B 4.04:1 AA Large
Aa #E4C199 on #6F574D 3.94:1 AA Large
Aa #034453 on #BF934A 3.83:1 AA Large
Aa #E4C199 on #A24817 3.56:1 AA Large
Aa #4F4343 on #FD782B 3.56:1 AA Large
Aa #BF934A on #4F4343 3.38:1 AA Large
Aa #1A2B3C on #27877C 3.33:1 AA Large
Aa #439691 on #FBFBD2 3.30:1 AA Large
Aa #FBFBD2 on #DE654A 3.27:1 AA Large
Aa #034453 on #DE654A 3.10:1 AA Large
Aa #034453 on #439691 3.07:1 AA Large
Aa #4F4343 on #DE654A 2.74:1 Fail
Aa #439691 on #4F4343 2.71:1 Fail
Aa #FBFBD2 on #BF934A 2.65:1 Fail
Aa #27877C on #E4C199 2.56:1 Fail
Aa #FBFBD2 on #FD782B 2.51:1 Fail
Aa #6F574D on #FD782B 2.51:1 Fail
Aa #034453 on #27877C 2.48:1 Fail
Aa #1A2B3C on #A24817 2.39:1 Fail
Aa #BF934A on #6F574D 2.38:1 Fail
Aa #A24817 on #FD782B 2.27:1 Fail
Aa #27877C on #4F4343 2.19:1 Fail
Aa #1A2B3C on #6F574D 2.16:1 Fail
Aa #BF934A on #A24817 2.15:1 Fail
Aa #439691 on #E4C199 2.06:1 Fail
Aa #E4C199 on #DE654A 2.04:1 Fail
Aa #6F574D on #DE654A 1.93:1 Fail
Aa #439691 on #6F574D 1.91:1 Fail
Aa #034453 on #A24817 1.78:1 Fail
Aa #A24817 on #DE654A 1.75:1 Fail
Aa #439691 on #A24817 1.73:1 Fail
Aa #E4C199 on #BF934A 1.65:1 Fail
Aa #27877C on #FD782B 1.63:1 Fail
Aa #034453 on #6F574D 1.61:1 Fail
Aa #FBFBD2 on #E4C199 1.60:1 Fail
Aa #E4C199 on #FD782B 1.57:1 Fail
Aa #4F4343 on #A24817 1.57:1 Fail
Aa #27877C on #BF934A 1.55:1 Fail
Aa #27877C on #6F574D 1.54:1 Fail
Aa #1A2B3C on #4F4343 1.52:1 Fail
Aa #6F574D on #4F4343 1.42:1 Fail
Aa #27877C on #A24817 1.39:1 Fail
Aa #1A2B3C on #034453 1.34:1 Fail
Aa #439691 on #FD782B 1.31:1 Fail
Aa #FD782B on #DE654A 1.30:1 Fail
Aa #27877C on #DE654A 1.25:1 Fail
Aa #439691 on #BF934A 1.25:1 Fail
Aa #27877C on #439691 1.24:1 Fail
Aa #BF934A on #DE654A 1.23:1 Fail
Aa #034453 on #4F4343 1.13:1 Fail
Aa #6F574D on #A24817 1.10:1 Fail
Aa #BF934A on #FD782B 1.05:1 Fail
Aa #439691 on #DE654A 1.01:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors