#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#254855Charcoal
#A7A97BSage
#FFC1B9Baby Pink
#F4F1DEBeige
Worn Baby Pink & Sage is a complementary color palette tagged muted, warm, pink. Near-complementary hues (about 171° apart) make this a high-contrast, attention-grabbing combination. 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 |
|---|---|---|---|---|---|
| Charcoal | #254855 | rgb(37, 72, 85) | hsl(196, 39%, 24%) | oklch(38.1% 0.046 224) | |
| Sage | #A7A97B | rgb(167, 169, 123) | hsl(63, 21%, 57%) | oklch(72.2% 0.063 110) | |
| Baby Pink | #FFC1B9 | rgb(255, 193, 185) | hsl(7, 100%, 86%) | oklch(86.5% 0.073 27) | |
| Beige | #F4F1DE | rgb(244, 241, 222) | hsl(52, 50%, 91%) | oklch(95.5% 0.025 100) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (91% down to 24% lightness). A natural fit for websites, presentations and branding.
- Background: Beige (#F4F1DE) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#254855) on #F4F1DE gives 8.65:1, passing WCAG AAA.
- Primary: Baby Pink (#FFC1B9) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#A7A97B) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Beige at 8.65:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Worn Baby Pink & Sage
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
#254855
#A7A97B
#FFC1B9
#F4F1DE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#254855 on #F4F1DE | Aa | 8.65:1 | AAA |
#254855 on #FFC1B9 | Aa | 6.36:1 | AA |
#254855 on #A7A97B | Aa | 4.03:1 | AA large only |
#A7A97B on #F4F1DE | Aa | 2.15:1 | Fail |
#A7A97B on #FFC1B9 | Aa | 1.58:1 | Fail |
#FFC1B9 on #F4F1DE | Aa | 1.36:1 | Fail |
Similar palettes 24 more in this mood
#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B
#F7E9DF
#FFC8D4
#E9AFD8
#C29991
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#714A47
#C0847F
#EAA39E
#F7EDE1
#FCEFF1
#F4C7CF
#E6A0AB
#5E4B4E
#FFF0F5
#FFB3D4
#D7919C
#9A8C91
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#7C5F32
#BB9565
#E29F9F
#F7F2EA
#784346
#AC656A
#E1A6AB
#FFF8F8
#584E4F
#D5A9B1
#FFC2CB
#FFEEF0
#FFC4C2
#6C6C6C
#976974
#F9FFFC
#B08968
#DDB892
#E6CCB2
#FFF6EA
#4B3832
#854442
#BE9B7B
#FFF4E6
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#FFF3EC
#FFD3BF
#FFB39B
#6E5147
#8A4A3C
#C98C7A
#E9C7B0
#F6EFE8
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#C4A484
#E6D3B3
#A98467
#F7F1E8
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#DCABC0
#BCB5F1
#FFC0BD
#F7ECF9
#FFAFCC
#BDE0FE
#CDB4DB
#FFFFFF
#BCA19B
#E3AEBA
#F1C9A6
#FEEDB0