#B9C989
#AC9D68
#75490B
#2C0B00
#281700Licorice
#5C5A30Coffee
#819A7AMoss
#9FD3C0Celadon
Coffee & Celadon Dream is a split color palette tagged dark, muted, black. A split scheme: Coffee plays against Celadon across roughly 101° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Licorice | #281700 | rgb(40, 23, 0) | hsl(35, 100%, 8%) | oklch(22.2% 0.047 73) | |
| Coffee | #5C5A30 | rgb(92, 90, 48) | hsl(57, 31%, 27%) | oklch(45.9% 0.061 106) | |
| Moss | #819A7A | rgb(129, 154, 122) | hsl(107, 14%, 54%) | oklch(65.8% 0.054 139) | |
| Celadon | #9FD3C0 | rgb(159, 211, 192) | hsl(158, 37%, 73%) | oklch(82.5% 0.060 170) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Coffee to lead. Lightness runs from 8% to 73%. Well suited to websites, presentations and branding.
- Background: Celadon (#9FD3C0) is the lightest color, so it belongs on large surfaces.
- Text: Licorice (#281700) on #9FD3C0 gives 10.35:1, passing WCAG AAA.
- Primary: Coffee (#5C5A30) is the most saturated mid-tone; use it for buttons and links (4.24:1 against the background, fine for UI elements).
- Accent: Moss (#819A7A) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Celadon at 10.35:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Coffee & Celadon Dream
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
#281700
#5C5A30
#819A7A
#9FD3C0
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#281700 on #9FD3C0 | Aa | 10.35:1 | AAA |
#281700 on #819A7A | Aa | 5.64:1 | AA |
#5C5A30 on #9FD3C0 | Aa | 4.24:1 | AA large only |
#281700 on #5C5A30 | Aa | 2.44:1 | Fail |
#5C5A30 on #819A7A | Aa | 2.31:1 | Fail |
#819A7A on #9FD3C0 | Aa | 1.84:1 | Fail |
Similar palettes 24 more in this mood
#C9B491
#B09E76
#816F54
#251900
#481800
#8A533C
#CE8E70
#DFAF96
#C4D7C5
#8F9784
#5C5A44
#21190C
#D1B1F6
#DD8DB4
#8B4537
#271700
#4B2800
#774113
#A3774D
#ECAE7E
#D4CDDE
#8E7F89
#645153
#281913
#D4DBD0
#7F8275
#535041
#312A1F
#5C3005
#7C4343
#BC7FA3
#CEAEF2
#3A2400
#765D2D
#B58F47
#F5D6A7
#593111
#774314
#CDA07D
#FFBD93
#543123
#594B2C
#8F9F7D
#A6CEC0
#2C1C00
#854010
#BD6263
#EBAAC7
#C0DDBA
#858452
#836946
#552F21
#4F3A00
#6C4F3C
#BC807D
#DCA4BD
#4F3100
#76462A
#B37B74
#FFCFD9
#211525
#634665
#886B91
#E0E1DD
#121128
#464A64
#837581
#D4CBC6
#411100
#975F5F
#D17E99
#F1A2D9
#491500
#A26024
#AB8346
#CAB87A
#0D1321
#34465E
#748CAB
#F0EBD8
#001D19
#3D6E4A
#007886
#CED6DC
#2C221C
#6C685C
#8C9385
#BECCC5
#271707
#684B29
#AB8D63
#D3C9B9