#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#0E0E14Obsidian
#4A4E6ADusk
#C8CCE0Lavender Gray
#00B974Jade
Jade & Dusk Drift is a split color palette tagged dark, minimal, black. The hues span about 75°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Obsidian | #0E0E14 | rgb(14, 14, 20) | hsl(240, 18%, 7%) | oklch(16.7% 0.012 285) | |
| Dusk | #4A4E6A | rgb(74, 78, 106) | hsl(233, 18%, 35%) | oklch(43.2% 0.047 278) | |
| Lavender Gray | #C8CCE0 | rgb(200, 204, 224) | hsl(230, 28%, 83%) | oklch(84.8% 0.028 277) | |
| Jade | #00B974 | rgb(0, 185, 116) | hsl(158, 100%, 36%) | oklch(69.2% 0.162 158) |
Why it works and how to use it
It works because the lightness range is wide (7% to 83%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Lavender Gray (#C8CCE0) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#0E0E14) on #C8CCE0 gives 12.06:1, passing WCAG AAA.
- Primary: Jade (#00B974) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusk (#4A4E6A) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Lavender Gray at 12.06:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Jade & Dusk Drift
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
#0E0E14
#4A4E6A
#C8CCE0
#00B974
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#0E0E14 on #C8CCE0 | Aa | 12.06:1 | AAA |
#0E0E14 on #00B974 | Aa | 7.5:1 | AAA |
#4A4E6A on #C8CCE0 | Aa | 5.09:1 | AA |
#4A4E6A on #00B974 | Aa | 3.16:1 | AA large only |
#0E0E14 on #4A4E6A | Aa | 2.37:1 | Fail |
#C8CCE0 on #00B974 | Aa | 1.61:1 | Fail |
Similar palettes 24 more in this mood
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#0D1A14
#385645
#6DBF8A
#E8F3EC
#18191A
#4F5052
#B8F53F
#F7F7F5
#F0F3FC
#00C458
#4C5774
#090D18
#180201
#514949
#208C00
#DEDEDE
#F5FBF9
#D4E3DE
#374B00
#0A1100
#0A0A0A
#3D3D3D
#B3FFB0
#FDFDFD
#06141B
#304F47
#53A575
#D4EADB
#E3F5EC
#92B3A0
#005E32
#111914
#0F0F0F
#444444
#049C65
#F4EEE8
#020403
#27332F
#A6DA00
#DCE8CA
#010804
#1F3C2C
#4FA16E
#D0DBD4
#020306
#2C3541
#00CB90
#CBD2D8
#000000
#3A3A3A
#D4AF37
#F2F2F2
#03071E
#0B525B
#1B998B
#C2F970
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#111111
#424242
#FF3B3B
#FAFAFA
#06141B
#314C5A
#1FA2B8
#CDE9EF
#14101F
#4D4365
#8E6BFF
#EEE9FF
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#111318
#454A54
#F4A7B9
#FBFBFC
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#141210
#4D4742
#C97B3A
#F2EAE2