#00A6A6
#7DD8D8
#00C57C
#FDFDFD
#1B4332Evergreen
#52B788Emerald
#E9F5F0Frost
#007F7ETeal
Crimson Emerald & Teal is a analogous color palette tagged modern, cold, green. Analogous neighbors on the wheel (Evergreen, Emerald, Frost) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Evergreen | #1B4332 | rgb(27, 67, 50) | hsl(155, 43%, 18%) | oklch(34.8% 0.055 163) | |
| Emerald | #52B788 | rgb(82, 183, 136) | hsl(152, 41%, 52%) | oklch(70.6% 0.118 161) | |
| Frost | #E9F5F0 | rgb(233, 245, 240) | hsl(155, 38%, 94%) | oklch(96.0% 0.014 169) | |
| Teal | #007F7E | rgb(0, 127, 126) | hsl(180, 100%, 25%) | oklch(54.0% 0.092 194) |
Why it works and how to use it
With 4 chromatic colors, Teal takes the lead while the rest support. Lightness runs from 18% to 94%. Well suited to websites, presentations and branding.
- Background: Frost (#E9F5F0) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#1B4332) on #E9F5F0 gives 9.91:1, passing WCAG AAA.
- Primary: Teal (#007F7E) is the most saturated mid-tone; use it for buttons and links (4.33:1 against the background, fine for UI elements).
- Accent: Emerald (#52B788) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Frost at 9.91:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Crimson Emerald & Teal
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#1B4332
#52B788
#E9F5F0
#007F7E
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#1B4332 on #E9F5F0 | Aa | 9.91:1 | AAA |
#1B4332 on #52B788 | Aa | 4.48:1 | AA large only |
#E9F5F0 on #007F7E | Aa | 4.33:1 | AA large only |
#1B4332 on #007F7E | Aa | 2.29:1 | Fail |
#52B788 on #E9F5F0 | Aa | 2.21:1 | Fail |
#52B788 on #007F7E | Aa | 1.96:1 | Fail |
Similar palettes 24 more in this mood
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#00818A
#009D8C
#31CA88
#ACE496
#498711
#00AA6D
#00C0AE
#00DDF3
#00735C
#379879
#7DC5A6
#81E3CC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#2E747B
#4CA7A9
#B3E8E3
#FBFAF3
#F9FFFC
#34FF8D
#5EEDFD
#343434
#037B03
#F2C14E
#2E9CA6
#F4EBD9
#222831
#575D65
#00ADB5
#EEEEEE
#6F83A3
#AAD0EC
#F4F9F4
#9DE0A7
#313B59
#617997
#7BDFDC
#FAFAFA
#1C2541
#465D79
#5BC0BE
#FFFFFF
#FAFAFA
#E5E7EB
#10B981
#111827
#8A6800
#84A347
#00C38B
#56E7F4
#A630C1
#755EF5
#7ABCFF
#80E6FF
#EEF4FF
#92CEF9
#0090DA
#072E46
#00736B
#20A8BE
#66B6E9
#ABC7FF
#ACB100
#FFB347
#0A9396
#F8F8F8
#00616A
#4DA27C
#98AA55
#FFCA7B
#6B4E1E
#00B8C4
#E8DCC0
#F7F3EA
#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
#1B4332
#52B788
#E9F5F0
#C9184A
#D2A04B
#757168
#5DF0DD
#F3FBFF