Sign Up Sign Up
3x4 Rgb

3x4 Rgb

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

3x4 Rgb

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

Modify
Vibrant 12 colors Warm Mixed Complementary green red blue contrast
Likes 18
Colors 12

CSS variables

:root {
  --c-vibrant-1: #004D23;
  --c-vibrant-2: #807100;
  --c-vibrant-3: #8EC724;
  --c-vibrant-4: #D5EDD8;
  --c-vibrant-5: #4D002A;
  --c-vibrant-6: #BD2F3E;
  --c-vibrant-7: #FA7DAD;
  --c-vibrant-8: #FAD0EB;
  --c-vibrant-9: #000C4D;
  --c-vibrant-10: #2D1AD9;
  --c-vibrant-11: #0090C9;
  --c-vibrant-12: #47D2D9;
}

About this palette

This 12-color vibrant palette runs from Silky Mint (#D5EDD8) as its lightest tone to Kantor Blue (#000C4D) as its darkest. It blends Lemon Balm Green, Sunlit Kelp Green, Thick Green, Silky Mint, Fig Balsamic, Crimson Cloud, Erythrosine, Little Smile, Kantor Blue, Lapis on Neptune, Dynamic Blue and Medium Turquoise into a single set you can drop straight into a UI. Of its 66 color pairings, 20 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #D5EDD8 on #000C4D at 14.6:1.

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

Color breakdown

Lemon Balm Green #004D23
RGB
rgb(0, 77, 35)
HSL
hsl(147, 100%, 15%)
Luminance
0.054
Sunlit Kelp Green #807100
RGB
rgb(128, 113, 0)
HSL
hsl(53, 100%, 25%)
Luminance
0.164
Thick Green #8EC724
RGB
rgb(142, 199, 36)
HSL
hsl(81, 69%, 46%)
Luminance
0.467
Silky Mint #D5EDD8
RGB
rgb(213, 237, 216)
HSL
hsl(128, 40%, 88%)
Luminance
0.797
Fig Balsamic #4D002A
RGB
rgb(77, 0, 42)
HSL
hsl(327, 100%, 15%)
Luminance
0.017
Crimson Cloud #BD2F3E
RGB
rgb(189, 47, 62)
HSL
hsl(354, 60%, 46%)
Luminance
0.132
Erythrosine #FA7DAD
RGB
rgb(250, 125, 173)
HSL
hsl(337, 93%, 74%)
Luminance
0.380
Little Smile #FAD0EB
RGB
rgb(250, 208, 235)
HSL
hsl(321, 81%, 90%)
Luminance
0.714
Kantor Blue #000C4D
RGB
rgb(0, 12, 77)
HSL
hsl(231, 100%, 15%)
Luminance
0.008
Lapis on Neptune #2D1AD9
RGB
rgb(45, 26, 217)
HSL
hsl(246, 79%, 48%)
Luminance
0.063
Dynamic Blue #0090C9
RGB
rgb(0, 144, 201)
HSL
hsl(197, 100%, 39%)
Luminance
0.242
Medium Turquoise #47D2D9
RGB
rgb(71, 210, 217)
HSL
hsl(183, 66%, 56%)
Luminance
0.524

Contrast & accessibility

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

Aa #D5EDD8 on #000C4D 14.60:1 AAA
Aa #FAD0EB on #000C4D 13.18:1 AAA
Aa #D5EDD8 on #4D002A 12.55:1 AAA
Aa #4D002A on #FAD0EB 11.33:1 AAA
Aa #000C4D on #47D2D9 9.91:1 AAA
Aa #8EC724 on #000C4D 8.92:1 AAA
Aa #4D002A on #47D2D9 8.52:1 AAA
Aa #004D23 on #D5EDD8 8.12:1 AAA
Aa #8EC724 on #4D002A 7.67:1 AAA
Aa #D5EDD8 on #2D1AD9 7.49:1 AAA
Aa #FA7DAD on #000C4D 7.42:1 AAA
Aa #004D23 on #FAD0EB 7.33:1 AAA
Aa #FAD0EB on #2D1AD9 6.76:1 AA
Aa #4D002A on #FA7DAD 6.38:1 AA
Aa #004D23 on #47D2D9 5.51:1 AA
Aa #2D1AD9 on #47D2D9 5.08:1 AA
Aa #000C4D on #0090C9 5.03:1 AA
Aa #004D23 on #8EC724 4.96:1 AA
Aa #D5EDD8 on #BD2F3E 4.65:1 AA
Aa #8EC724 on #2D1AD9 4.57:1 AA
Aa #4D002A on #0090C9 4.32:1 AA Large
Aa #BD2F3E on #FAD0EB 4.20:1 AA Large
Aa #004D23 on #FA7DAD 4.12:1 AA Large
Aa #807100 on #D5EDD8 3.96:1 AA Large
Aa #FA7DAD on #2D1AD9 3.80:1 AA Large
Aa #807100 on #000C4D 3.69:1 AA Large
Aa #807100 on #FAD0EB 3.57:1 AA Large
Aa #807100 on #4D002A 3.17:1 AA Large
Aa #BD2F3E on #47D2D9 3.16:1 AA Large
Aa #BD2F3E on #000C4D 3.14:1 AA Large
Aa #D5EDD8 on #0090C9 2.90:1 Fail
Aa #8EC724 on #BD2F3E 2.84:1 Fail
Aa #004D23 on #0090C9 2.80:1 Fail
Aa #4D002A on #BD2F3E 2.70:1 Fail
Aa #807100 on #47D2D9 2.68:1 Fail
Aa #FAD0EB on #0090C9 2.62:1 Fail
Aa #2D1AD9 on #0090C9 2.58:1 Fail
Aa #807100 on #8EC724 2.42:1 Fail
Aa #BD2F3E on #FA7DAD 2.36:1 Fail
Aa #004D23 on #807100 2.05:1 Fail
Aa #807100 on #FA7DAD 2.01:1 Fail
Aa #D5EDD8 on #FA7DAD 1.97:1 Fail
Aa #0090C9 on #47D2D9 1.97:1 Fail
Aa #000C4D on #2D1AD9 1.95:1 Fail
Aa #807100 on #2D1AD9 1.89:1 Fail
Aa #004D23 on #000C4D 1.80:1 Fail
Aa #FA7DAD on #FAD0EB 1.78:1 Fail
Aa #8EC724 on #0090C9 1.77:1 Fail
Aa #004D23 on #BD2F3E 1.75:1 Fail
Aa #4D002A on #2D1AD9 1.68:1 Fail
Aa #8EC724 on #D5EDD8 1.64:1 Fail
Aa #BD2F3E on #2D1AD9 1.61:1 Fail
Aa #BD2F3E on #0090C9 1.60:1 Fail
Aa #004D23 on #4D002A 1.55:1 Fail
Aa #8EC724 on #FAD0EB 1.48:1 Fail
Aa #D5EDD8 on #47D2D9 1.47:1 Fail
Aa #FA7DAD on #0090C9 1.47:1 Fail
Aa #807100 on #0090C9 1.36:1 Fail
Aa #FA7DAD on #47D2D9 1.34:1 Fail
Aa #FAD0EB on #47D2D9 1.33:1 Fail
Aa #8EC724 on #FA7DAD 1.20:1 Fail
Aa #807100 on #BD2F3E 1.18:1 Fail
Aa #4D002A on #000C4D 1.16:1 Fail
Aa #8EC724 on #47D2D9 1.11:1 Fail
Aa #D5EDD8 on #FAD0EB 1.11:1 Fail
Aa #004D23 on #2D1AD9 1.08: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