CSS Color: PeachPuff
Named CSS color PeachPuff — #FFDAB9 in HEX, rgb(255, 218, 185) in RGB, hsl(28, 100%, 86%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | PeachPuff | color: PeachPuff; |
| HEX | #FFDAB9 | color: #FFDAB9; |
| RGB | rgb(255, 218, 185) | color: rgb(255, 218, 185); |
| HSL | hsl(28, 100%, 86%) | color: hsl(28, 100%, 86%); |
About PeachPuff
PeachPuff is a warm, soft peach that adds a distinct warm glow to designs. At hex `#FFDAB9`, it has maximum red (255) with moderate green (218) and blue (185). Sitting at 28 degrees with full saturation and 86% lightness, its warm orange tint is clearly visible.
In web design, PeachPuff works well for warm card backgrounds, soft accent areas, and gentle highlight sections. It is popular in food websites, beauty brands, and lifestyle applications. Its visibility makes it a useful background where Snow or Linen might be too subtle.
For accessibility, PeachPuff against white achieves only about 1.3:1 contrast — not enough for borders or text. Use it as a background color with dark text. Against dark backgrounds, PeachPuff provides good readability.
PeachPuff is warmer and more visible than Linen, and lighter than Tan. It pairs well with brown, teal, navy, forest green, and deep orange. In Tailwind CSS, `orange-100` or `amber-100` provide similar warm, soft peach tones.
FAQ
What is the hex code for PeachPuff?
The CSS named color PeachPuff has the hex code #FFDAB9. You can use it in CSS as color: #FFDAB9; or simply color: PeachPuff;.
What is PeachPuff in RGB?
In RGB notation, PeachPuff is rgb(255, 218, 185). Use it in CSS as color: rgb(255, 218, 185);.
What is PeachPuff in HSL?
In HSL notation, PeachPuff is hsl(28, 100%, 86%). Use it in CSS as color: hsl(28, 100%, 86%);.
What color category is PeachPuff?
PeachPuff belongs to the Orange color family in the CSS named colors specification.
Can I use the name "PeachPuff" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: PeachPuff; or background-color: PeachPuff; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert PeachPuff to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →