Peach HEX Code
The HEX code for peach is #FFCBA4 (or CSS peach puff #FFDAB9). Peach is a soft, warm color between pink and orange, named after the fruit. It's gentle, inviting, and popular in feminine and lifestyle designs.
Peach Color Values
| Format | Value |
|---|---|
| HEX | #FFCBA4 |
| RGB | rgb(255, 203, 164) |
| HSL | hsl(26, 100%, 82%) |
| CMYK | C:0 M:20 Y:36 K:0 |
Peach Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Peach Puff | #FFDAB9 | CSS named color |
| Peach | #FFCBA4 | Standard peach |
| Deep Peach | #FFCBA4 | Richer |
| Apricot | #FBCEB1 | Similar warm |
| Papaya Whip | #FFEFD5 | Very light |
| Moccasin | #FFE4B5 | More yellow |
Peach in Design
Peach conveys:
- Warmth: Inviting, friendly
- Softness: Gentle, delicate
- Femininity: Beauty, lifestyle
- Youth: Fresh, playful
Using Peach in Design
``css
/* Peach palette */
:root {
--peach-light: #FFEFD5;
--peach: #FFCBA4;
--peach-dark: #E9967A;
}
/* Soft, inviting card */
.peach-card {
background-color: #FFEFD5;
border: 1px solid #FFCBA4;
}
`
Peach Color Palettes
| Theme | Primary | Secondary | Accent |
|---|---|---|---|
| Feminine | #FFCBA4 | #FFB6C1 | #FF69B4 |
| Soft | #FFDAB9 | #FFFFF0 | #E9967A |
| Warm | #FFCBA4 | #F5DEB3 | #8B4513 |
Peach is ideal for beauty, lifestyle, food, and feminine brand designs.Peach in Every Format
| Format | Value |
|---|---|
| HEX | #FFE5B4 |
| RGB | rgb(255, 229, 180) |
| HSL | hsl(39, 100%, 85%) |
| CMYK | cmyk(0%, 10%, 29%, 0%) |
| Nearest Tailwind | orange-200 (#FED7AA) |
About This Colour
Peach is around #FFE5B4. It is not a CSS keyword either; peachpuff (#FFDAB9) is the nearest standard name.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Peach text on white | 1.23:1 | fails |
| Peach text on black | 17.12:1 | AAA |
| White text on peach | 1.23:1 | fails |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Peach passes on black, so reserve it for dark backgrounds.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #ffffff |
| Base | #FFE5B4 |
| Darker (−20%) | #ffc14d |
| Complementary | #b3cdff |
| Triadic | #b3ffe4, #e4b3ff |
Tints (toward white): #ffecc7, #fff2da, #fff9ecShades (toward black): #bfac87, #80735a, #40392d
Using It
`css
:root {
--peach: #ffe5b4;
--peach-light: #ffffff;
--peach-dark: #ffc14d;
}
.badge {
background: var(--peach);
color: #fff;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.