#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#162631Raisin
#2A9CABCadet
#B1E3D6Powder Blue
#CBFFD0Beige
Cadet & Beige Story is a split color palette tagged muted, cold, teal. The hues span about 78°, 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 |
|---|---|---|---|---|---|
| Raisin | #162631 | rgb(22, 38, 49) | hsl(204, 38%, 14%) | oklch(26.0% 0.030 239) | |
| Cadet | #2A9CAB | rgb(42, 156, 171) | hsl(187, 61%, 42%) | oklch(63.8% 0.099 208) | |
| Powder Blue | #B1E3D6 | rgb(177, 227, 214) | hsl(164, 47%, 79%) | oklch(87.7% 0.055 177) | |
| Beige | #CBFFD0 | rgb(203, 255, 208) | hsl(126, 100%, 90%) | oklch(95.2% 0.082 147) |
Why it works and how to use it
With 4 chromatic colors, Cadet takes the lead while the rest support. Lightness runs from 14% to 90%. Well suited to websites, presentations and branding.
- Background: Beige (#CBFFD0) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#162631) on #CBFFD0 gives 13.83:1, passing WCAG AAA.
- Primary: Cadet (#2A9CAB) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Powder Blue (#B1E3D6) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Beige at 13.83:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cadet & Beige Story
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
#162631
#2A9CAB
#B1E3D6
#CBFFD0
Color-blind check: under tritanopia, Powder Blue and Beige 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 |
|---|---|---|---|
#162631 on #CBFFD0 | Aa | 13.83:1 | AAA |
#162631 on #B1E3D6 | Aa | 10.94:1 | AAA |
#162631 on #2A9CAB | Aa | 4.75:1 | AA |
#2A9CAB on #CBFFD0 | Aa | 2.91:1 | Fail |
#2A9CAB on #B1E3D6 | Aa | 2.3:1 | Fail |
#B1E3D6 on #CBFFD0 | Aa | 1.26:1 | Fail |
Similar palettes 24 more in this mood
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#13505B
#0C7489
#8FD3E0
#F0FAFB
#5CBAA9
#5E99B8
#23737D
#356345
#245B54
#4F9E92
#B7E4DC
#F1FBF9
#0B3954
#087E8B
#BFD7EA
#FFFFFF
#004F4E
#49B2AC
#BCDEBE
#E4F1FF
#78A89A
#55849E
#005756
#003741
#026579
#229393
#70BEA6
#9DC2DE
#00273E
#006975
#A6BDD0
#E9E9E9
#005359
#529D9F
#8ACBCC
#8DE4F3
#77DADA
#7EB3A3
#41674C
#37565E
#00727A
#667248
#869387
#68B4A1
#213C04
#356344
#1C8888
#6F9C8F
#0D5B86
#007E8B
#A0C3DE
#FDFDFD
#2E747B
#4CA7A9
#B3E8E3
#FBFAF3
#31534C
#2E9C95
#77C5B3
#DCF5E4
#0A4F5C
#177E89
#E3D7B8
#FBF8F1
#6B9399
#73B2C1
#95D5D9
#B2F9FD
#E5F7FF
#81D5E8
#347B78
#2E3836
#BCF3F4
#55B1B5
#007579
#153B3D
#EEF8F5
#C6E9DF
#5FB3A1
#1F4D45
#224D5C
#4398AA
#ACF2EF
#F0FDFB