Named color · #F4CAC6
First Peach
First Peach is #F4CAC6: rgb(244 202 198), hsl(5 68% 87%), oklch(0.874 0.048 24.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · First Peach color name →
#F4CAC6
oklch(0.874 0.048 24.5)
Color conversions
- HEX
- #f4cac6
- RGB
- rgb(244 202 198)
- HSL
- hsl(5 68% 87%)
- HWB
- hwb(5 78% 4%)
- OKLCH
- oklch(0.874 0.048 24.5)
- OKLab
- oklab(0.874 0.044 0.02)
- CIE Lab
- lab(84.94 14.86 7.87)
- LCH
- lch(84.94 16.82 27.9)
- CMYK
- cmyk(0% 17% 19% 4%)
Tints · Shades · Tones
Tints
- F5CFCC
- F7D5D1
- F8DAD7
- F9DFDD
- FAE4E2
- FBEAE8
- FCEFEE
- FDF4F3
- FEFAF9
Shades
- D4AFAC
- B59592
- 977C7A
- 7A6462
- 5E4D4B
- 443735
- 2B2221
- 140F0E
- 030202
Tones
- E8C2BF
- DCBBB8
- D0B3B0
- C4ACA9
- B9A4A2
- AD9D9B
- A29694
- 968E8E
- 8B8787
Color harmonies
Complementary +180°
- F4CAC6
First Peach
- B1DFE4
≈ Powder Blue
Analogous -30° +30°
- F4CAC6
First Peach
- F1C9D7
≈ Persian Delight
- F0CEB8
≈ Desert Field
Triadic +120° +240°
- F4CAC6
First Peach
- C3DEC2
≈ Soft Grass
- C6D6F6
≈ Murano Soft Blue
Split-complementary +150° +210°
- F4CAC6
First Peach
- B6E0D3
≈ Mint Mist
- B8DCF1
≈ Greek Isles
Tetradic +90° +180° +270°
- F4CAC6
First Peach
- D4DAB6
≈ Prairie Willow
- B1DFE4
≈ Powder Blue
- D7D0F3
≈ Plum’s the Word
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 23
Ag
AAAOn black
WCAG 14.11:1 · APCA Lc 80
Best text color: #000000
WCAG 14.11:1 (AAA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--first-peach: #f4cac6;
--first-peach-rgb: 244 202 198;
--first-peach-oklch: oklch(0.874 0.048 24.5);
}
.element {
color: var(--first-peach);
background-color: hsl(5 68% 87%);
border-color: oklch(0.874 0.048 24.5);
}Tailwind CSS v4
@theme {
--color-first-peach: #f4cac6;
--color-first-peach-50: #fff0ee;
--color-first-peach-100: #f8e2df;
--color-first-peach-200: #e8cdc9;
--color-first-peach-300: #cfafaa;
--color-first-peach-400: #b99490;
--color-first-peach-500: #a47a76;
--color-first-peach-600: #8b6764;
--color-first-peach-700: #6f5350;
--color-first-peach-800: #523c3b;
--color-first-peach-900: #392928;
--color-first-peach-950: #231716;
}SCSS
$first-peach: #f4cac6;
$first-peach-rgb: 244, 202, 198;
$first-peach-light: mix(#fff, $first-peach, 20%);
$first-peach-dark: mix(#000, $first-peach, 20%);
.element {
color: $first-peach;
box-shadow: 0 0 0 2px rgba($first-peach, 0.35);
}