#222831
#575D65
#00ADB5
#EEEEEE
#007B82Teal
#FDFDFDWhite
#2E3440Gunmetal
#D8DEE9Glacier
Ruby Teal & Gunmetal is a analogous color palette tagged minimal, teal, white. Analogous neighbors on the wheel (Teal, Glacier) 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 |
|---|---|---|---|---|---|
| Teal | #007B82 | rgb(0, 123, 130) | hsl(183, 100%, 25%) | oklch(53.1% 0.090 202) | |
| White | #FDFDFD | rgb(253, 253, 253) | hsl(0, 0%, 99%) | oklch(99.4% 0.000 0) | |
| Gunmetal | #2E3440 | rgb(46, 52, 64) | hsl(220, 16%, 22%) | oklch(32.4% 0.023 264) | |
| Glacier | #D8DEE9 | rgb(216, 222, 233) | hsl(219, 28%, 88%) | oklch(89.9% 0.016 263) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (99% down to 22% lightness). A natural fit for websites, presentations and branding.
- Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#2E3440) on #FDFDFD gives 12.28:1, passing WCAG AAA.
- Primary: Teal (#007B82) is the most saturated mid-tone; use it for buttons and links (4.97:1 against the background, fine for UI elements).
- Accent: Glacier (#D8DEE9) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Gunmetal at 12.28:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Ruby Teal & Gunmetal
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
#007B82
#FDFDFD
#2E3440
#D8DEE9
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#FDFDFD on #2E3440 | Aa | 12.28:1 | AAA |
#2E3440 on #D8DEE9 | Aa | 9.25:1 | AAA |
#007B82 on #FDFDFD | Aa | 4.97:1 | AA |
#007B82 on #D8DEE9 | Aa | 3.74:1 | AA large only |
#007B82 on #2E3440 | Aa | 2.47:1 | Fail |
#FDFDFD on #D8DEE9 | Aa | 1.33:1 | Fail |
Similar palettes 24 more in this mood
#F8FAFA
#D8E2E1
#0F766E
#1C2B2A
#332E2E
#00A3A2
#DFC6C8
#F8F5F5
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#F1EFE7
#DAD7CD
#0F6E6B
#2B2B2B
#F5FBFB
#D9EFEF
#1BA3A8
#1E2A2B
#FDFDFD
#E4E4E4
#111111
#007F65
#242828
#809494
#A4FCFF
#EEFDFE
#262626
#A5BBB9
#83FFDF
#FAFFFF
#F1EFE7
#D9D4C7
#8C8A82
#2F2F2F
#3E4644
#88A9A0
#9FF3E0
#D9FFF6
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#343B44
#6B717A
#40CBD3
#FAFAFA
#2B2A28
#8D8780
#D8D2C8
#F5F2ED
#F6F0E7
#E3D6C3
#2A7F7A
#173F3D
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#111318
#454A54
#74D4C7
#FBFBFC
#1A1A1D
#4C4C54
#00B7B2
#F4F4F6
#000000
#3A3A3A
#D4AF37
#F2F2F2
#3E2723
#6D4C41
#A1887F
#EFEBE9
#2C3E50
#7F8C8D
#BDC3C7
#ECF0F1
#212529
#525A61
#ADB5BD
#F8F9FA
#2B2B2B
#C9A227
#EAE7DC
#FFFFFF