Sign Up Sign Up
RGB Principle

RGB Principle

12-color palette · Warm · Mixed · Triadic harmony

Back to Library

RGB Principle

12-color palette · Warm temperature · Mixed tone · Triadic harmony

Modify
Earthy 12 colors Warm Mixed Triadic artist pixel character logo
Likes 12
Colors 12

CSS variables

:root {
  --c-earthy-1: #FFFFFF;
  --c-earthy-2: #E1E1E1;
  --c-earthy-3: #4C4646;
  --c-earthy-4: #232323;
  --c-earthy-5: #BA0000;
  --c-earthy-6: #870000;
  --c-earthy-7: #2FBF00;
  --c-earthy-8: #186500;
  --c-earthy-9: #14CFDE;
  --c-earthy-10: #179AA5;
  --c-earthy-11: #5E0057;
  --c-earthy-12: #43003D;
}

About this palette

This 12-color earthy palette runs from White (#FFFFFF) as its lightest tone to Jacarta (#43003D) as its darkest. It blends White, Jupiter, Dampened Black, Young Night, Harlock’s Cape, Chanticleer, Sour Apple Rings, Keen Green, Fish Boy, Island Dream, Cloak and Dagger and Jacarta into a single set you can drop straight into a UI. Of its 66 color pairings, 24 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFFFF on #43003D at 16.08:1.

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

Color breakdown

White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000
Jupiter #E1E1E1
RGB
rgb(225, 225, 225)
HSL
hsl(0, 0%, 88%)
Luminance
0.753
Dampened Black #4C4646
RGB
rgb(76, 70, 70)
HSL
hsl(0, 4%, 29%)
Luminance
0.064
Young Night #232323
RGB
rgb(35, 35, 35)
HSL
hsl(0, 0%, 14%)
Luminance
0.017
Harlock’s Cape #BA0000
RGB
rgb(186, 0, 0)
HSL
hsl(0, 100%, 36%)
Luminance
0.104
Chanticleer #870000
RGB
rgb(135, 0, 0)
HSL
hsl(0, 100%, 26%)
Luminance
0.052
Sour Apple Rings #2FBF00
RGB
rgb(47, 191, 0)
HSL
hsl(105, 100%, 37%)
Luminance
0.379
Keen Green #186500
RGB
rgb(24, 101, 0)
HSL
hsl(106, 100%, 20%)
Luminance
0.095
Fish Boy #14CFDE
RGB
rgb(20, 207, 222)
HSL
hsl(184, 83%, 47%)
Luminance
0.501
Island Dream #179AA5
RGB
rgb(23, 154, 165)
HSL
hsl(185, 76%, 37%)
Luminance
0.260
Cloak and Dagger #5E0057
RGB
rgb(94, 0, 87)
HSL
hsl(304, 100%, 18%)
Luminance
0.031
Jacarta #43003D
RGB
rgb(67, 0, 61)
HSL
hsl(305, 100%, 13%)
Luminance
0.015

Contrast & accessibility

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

Aa #FFFFFF on #43003D 16.08:1 AAA
Aa #FFFFFF on #232323 15.72:1 AAA
Aa #FFFFFF on #5E0057 13.01:1 AAA
Aa #E1E1E1 on #43003D 12.30:1 AAA
Aa #E1E1E1 on #232323 12.02:1 AAA
Aa #FFFFFF on #870000 10.34:1 AAA
Aa #E1E1E1 on #5E0057 9.95:1 AAA
Aa #FFFFFF on #4C4646 9.24:1 AAA
Aa #14CFDE on #43003D 8.43:1 AAA
Aa #232323 on #14CFDE 8.24:1 AAA
Aa #E1E1E1 on #870000 7.91:1 AAA
Aa #FFFFFF on #186500 7.24:1 AAA
Aa #E1E1E1 on #4C4646 7.07:1 AAA
Aa #14CFDE on #5E0057 6.82:1 AA
Aa #FFFFFF on #BA0000 6.80:1 AA
Aa #2FBF00 on #43003D 6.56:1 AA
Aa #232323 on #2FBF00 6.42:1 AA
Aa #E1E1E1 on #186500 5.54:1 AA
Aa #870000 on #14CFDE 5.42:1 AA
Aa #2FBF00 on #5E0057 5.31:1 AA
Aa #E1E1E1 on #BA0000 5.20:1 AA
Aa #4C4646 on #14CFDE 4.85:1 AA
Aa #179AA5 on #43003D 4.75:1 AA
Aa #232323 on #179AA5 4.64:1 AA
Aa #870000 on #2FBF00 4.22:1 AA Large
Aa #179AA5 on #5E0057 3.84:1 AA Large
Aa #186500 on #14CFDE 3.80:1 AA Large
Aa #4C4646 on #2FBF00 3.77:1 AA Large
Aa #BA0000 on #14CFDE 3.57:1 AA Large
Aa #FFFFFF on #179AA5 3.39:1 AA Large
Aa #870000 on #179AA5 3.05:1 AA Large
Aa #2FBF00 on #186500 2.96:1 Fail
Aa #BA0000 on #2FBF00 2.78:1 Fail
Aa #4C4646 on #179AA5 2.73:1 Fail
Aa #E1E1E1 on #179AA5 2.59:1 Fail
Aa #FFFFFF on #2FBF00 2.45:1 Fail
Aa #BA0000 on #43003D 2.36:1 Fail
Aa #232323 on #BA0000 2.31:1 Fail
Aa #186500 on #43003D 2.22:1 Fail
Aa #232323 on #186500 2.17:1 Fail
Aa #186500 on #179AA5 2.14:1 Fail
Aa #BA0000 on #179AA5 2.01:1 Fail
Aa #FFFFFF on #14CFDE 1.91:1 Fail
Aa #BA0000 on #5E0057 1.91:1 Fail
Aa #E1E1E1 on #2FBF00 1.87:1 Fail
Aa #186500 on #5E0057 1.80:1 Fail
Aa #14CFDE on #179AA5 1.78:1 Fail
Aa #4C4646 on #43003D 1.74:1 Fail
Aa #4C4646 on #232323 1.70:1 Fail
Aa #870000 on #43003D 1.55:1 Fail
Aa #232323 on #870000 1.52:1 Fail
Aa #BA0000 on #870000 1.52:1 Fail
Aa #E1E1E1 on #14CFDE 1.46:1 Fail
Aa #870000 on #186500 1.43:1 Fail
Aa #4C4646 on #5E0057 1.41:1 Fail
Aa #2FBF00 on #179AA5 1.38:1 Fail
Aa #4C4646 on #BA0000 1.36:1 Fail
Aa #FFFFFF on #E1E1E1 1.31:1 Fail
Aa #4C4646 on #186500 1.28:1 Fail
Aa #2FBF00 on #14CFDE 1.28:1 Fail
Aa #870000 on #5E0057 1.26:1 Fail
Aa #5E0057 on #43003D 1.24:1 Fail
Aa #232323 on #5E0057 1.21:1 Fail
Aa #4C4646 on #870000 1.12:1 Fail
Aa #BA0000 on #186500 1.06:1 Fail
Aa #232323 on #43003D 1.02:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors