Named color · #FCCF8B
Puff Pastry Yellow
Puff Pastry Yellow is #FCCF8B: rgb(252 207 139), hsl(36 95% 77%), oklch(0.879 0.099 77.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Puff Pastry Yellow color name →
#FCCF8B
oklch(0.879 0.099 77.2)
Color conversions
- HEX
- #fccf8b
- RGB
- rgb(252 207 139)
- HSL
- hsl(36 95% 77%)
- HWB
- hwb(36 55% 1%)
- OKLCH
- oklch(0.879 0.099 77.2)
- OKLab
- oklab(0.879 0.022 0.097)
- CIE Lab
- lab(85.98 10.15 40)
- LCH
- lch(85.98 41.27 75.8)
- CMYK
- cmyk(0% 18% 45% 1%)
Tints · Shades · Tones
Tints
- FDD497
- FDD9A4
- FDDEAF
- FEE3BB
- FEE7C7
- FEECD2
- FFF1DD
- FFF6E9
- FFFAF4
Shades
- DBB478
- BB9966
- 9C7F54
- 7E6743
- 624F32
- 473823
- 2D2314
- 161007
- 030201
Tones
- EFC78B
- E2BF8A
- D6B78A
- C9AF89
- BCA788
- B09F87
- A49785
- 989084
- 8C8882
Color harmonies
Complementary +180°
- FCCF8B
Puff Pastry Yellow
- BFD9FF
≈ Broad Daylight
Analogous -30° +30°
- FCCF8B
Puff Pastry Yellow
- FFCAB0
≈ Bleached Apricot
- DEDC8E
≈ Lively Laugh
Triadic +120° +240°
- FCCF8B
Puff Pastry Yellow
- 80ECEE
≈ Dead Sea
- F0C5FF
≈ Aquarelle Lilac
Split-complementary +150° +210°
- FCCF8B
Puff Pastry Yellow
- A0E2FF
≈ Ganon Blue
- D4D1FF
≈ Pale Lavender
Tetradic +90° +180° +270°
- FCCF8B
Puff Pastry Yellow
- 93ECCA
≈ Nightly Aurora
- BFD9FF
≈ Broad Daylight
- FFC3E1
≈ Sugarwinkle
Contrast & accessibility
Ag
FailOn white
WCAG 1.45:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.43:1 · APCA Lc 82
Best text color: #000000
WCAG 14.43:1 (AAA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--puff-pastry-yellow: #fccf8b;
--puff-pastry-yellow-rgb: 252 207 139;
--puff-pastry-yellow-oklch: oklch(0.879 0.099 77.2);
}
.element {
color: var(--puff-pastry-yellow);
background-color: hsl(36 95% 77%);
border-color: oklch(0.879 0.099 77.2);
}Tailwind CSS v4
@theme {
--color-puff-pastry-yellow: #fccf8b;
--color-puff-pastry-yellow-50: #fff3d6;
--color-puff-pastry-yellow-100: #fae5c3;
--color-puff-pastry-yellow-200: #ebd0a5;
--color-puff-pastry-yellow-300: #d3b27d;
--color-puff-pastry-yellow-400: #bf9758;
--color-puff-pastry-yellow-500: #ab7d2e;
--color-puff-pastry-yellow-600: #906a29;
--color-puff-pastry-yellow-700: #745421;
--color-puff-pastry-yellow-800: #563d16;
--color-puff-pastry-yellow-900: #3c2a0e;
--color-puff-pastry-yellow-950: #261702;
}SCSS
$puff-pastry-yellow: #fccf8b;
$puff-pastry-yellow-rgb: 252, 207, 139;
$puff-pastry-yellow-light: mix(#fff, $puff-pastry-yellow, 20%);
$puff-pastry-yellow-dark: mix(#000, $puff-pastry-yellow, 20%);
.element {
color: $puff-pastry-yellow;
box-shadow: 0 0 0 2px rgba($puff-pastry-yellow, 0.35);
}