#B22222
#165B33
#F8B229
#FFFFFF
#7B5D00Cocoa
#165B33Hunter Green
#F8B229Orange
#FDFDFDWhite
Ruby Orange & Cocoa is a vivid split color palette tagged warm, green, white. A split scheme: Cocoa plays against Orange across roughly 105° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cocoa | #7B5D00 | rgb(123, 93, 0) | hsl(45, 100%, 24%) | oklch(49.5% 0.101 87) | |
| Hunter Green | #165B33 | rgb(22, 91, 51) | hsl(145, 61%, 22%) | oklch(41.8% 0.095 153) | |
| Orange | #F8B229 | rgb(248, 178, 41) | hsl(40, 94%, 57%) | oklch(80.9% 0.159 78) | |
| White | #FDFDFD | rgb(253, 253, 253) | hsl(0, 0%, 99%) | oklch(99.4% 0.000 0) |
Why it works and how to use it
It works because the lightness range is wide (22% to 99%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
- Text: Hunter Green (#165B33) on #FDFDFD gives 8.01:1, passing WCAG AAA.
- Primary: Cocoa (#7B5D00) is the most saturated mid-tone; use it for buttons and links (6.06:1 against the background, fine for UI elements).
- Accent: Orange (#F8B229) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Hunter Green on White at 8.01:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Ruby Orange & Cocoa
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
#7B5D00
#165B33
#F8B229
#FDFDFD
Color-blind check: under protanopia, Cocoa and Hunter Green become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#165B33 on #FDFDFD | Aa | 8.01:1 | AAA |
#7B5D00 on #FDFDFD | Aa | 6.06:1 | AA |
#165B33 on #F8B229 | Aa | 4.42:1 | AA large only |
#7B5D00 on #F8B229 | Aa | 3.34:1 | AA large only |
#F8B229 on #FDFDFD | Aa | 1.81:1 | Fail |
#7B5D00 on #165B33 | Aa | 1.32:1 | Fail |
Similar palettes 24 more in this mood
#FF6B8B
#FFD166
#8CD790
#FFFFFF
#8FCD9A
#D32636
#FBBFCC
#FDF9F3
#F4EFE7
#F0BAC5
#EE353E
#91C58A
#DA8996
#EDD5A0
#A6CEA7
#FDFDFD
#CE403A
#2E6F46
#FFD593
#FAFAFA
#FF8C00
#FFD23F
#8CC63F
#FFFFFF
#7B3F00
#C98A4B
#00731C
#FFF8E7
#F9F3E8
#8DCB8E
#F5AFBE
#DF0A00
#AC205C
#3E5614
#FFAA74
#FDFDFD
#E18F00
#FFD166
#8CD790
#FDFDFD
#00653D
#C62A29
#EBC751
#FBF1E0
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#FBF6ED
#E22036
#FFC5D1
#93DC9E
#E70034
#F3B2C0
#F9F7F3
#83D4A4
#3A0F2E
#8A3B6D
#6C9C46
#F7E8F1
#EF1715
#F2B9C5
#97CF8D
#F5F0E7
#8B7000
#BC951D
#BDDFA2
#F4F1DE
#246C0F
#FCF0DE
#A4051F
#E5BD2E
#9FD39E
#EFAAB8
#F8F5F1
#E33011
#F8F5EF
#F9ACBD
#98D58E
#E10E34
#00622D
#D70001
#F8EFE0
#E4BF47
#D8341D
#91E3A8
#F9A7B9
#FBF5EC
#FFBA85
#FFEFC0
#A8E45F
#FAFAFA