#222831
#575D65
#00ADB5
#EEEEEE
#1A1A1DRaisin
#4C4C54Graphite
#00B7B2Cadet
#F4F4F6Smoke
Clean Cadet & Graphite is a neutral-based color palette tagged dark, modern, minimal. Cadet is the only saturated color here, so it does all the talking against a neutral base. Neither washed out nor loud, it adapts to most contexts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Raisin | #1A1A1D | rgb(26, 26, 29) | hsl(240, 5%, 11%) | oklch(21.9% 0.006 286) | |
| Graphite | #4C4C54 | rgb(76, 76, 84) | hsl(240, 5%, 31%) | oklch(41.9% 0.013 286) | |
| Cadet | #00B7B2 | rgb(0, 183, 178) | hsl(178, 100%, 36%) | oklch(70.4% 0.121 191) | |
| Smoke | #F4F4F6 | rgb(244, 244, 246) | hsl(240, 10%, 96%) | oklch(96.8% 0.003 286) |
Why it works and how to use it
It works because the lightness range is wide (11% to 96%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#F4F4F6) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#1A1A1D) on #F4F4F6 gives 15.81:1, passing WCAG AAA.
- Primary: Cadet (#00B7B2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Graphite (#4C4C54) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Smoke at 15.81:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Clean Cadet & Graphite
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
#1A1A1D
#4C4C54
#00B7B2
#F4F4F6
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#1A1A1D on #F4F4F6 | Aa | 15.81:1 | AAA |
#4C4C54 on #F4F4F6 | Aa | 7.74:1 | AAA |
#1A1A1D on #00B7B2 | Aa | 6.96:1 | AA |
#4C4C54 on #00B7B2 | Aa | 3.41:1 | AA large only |
#00B7B2 on #F4F4F6 | Aa | 2.27:1 | Fail |
#1A1A1D on #4C4C54 | Aa | 2.04:1 | Fail |
Similar palettes 24 more in this mood
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#E8EEEE
#DD5600
#596564
#050D0D
#121214
#5D6064
#B3CCFF
#E6EEFF
#FAFAFA
#919191
#81000C
#111111
#EDEEF0
#C9CCD1
#7A5A00
#0B1220
#0F0F0F
#444444
#049C65
#F4EEE8
#EDEEF0
#C9CCD1
#006699
#05141E
#111111
#424242
#E444BE
#FAFAFA
#121720
#474C54
#009198
#D3D3D3
#111318
#454A54
#74D4C7
#FBFBFC
#0F0F0F
#444444
#C8623F
#F4EEE8
#111111
#424242
#8C9B00
#FAFAFA
#EDEEF0
#C9CCD1
#9714A2
#0B1220
#000000
#3A3A3A
#D4AF37
#F2F2F2
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#111318
#454A54
#F4A7B9
#FBFBFC
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#18191A
#4F5052
#B8F53F
#F7F7F5