Benoemde kleur · #FFD299
Whipped Apricot
Whipped Apricot is #FFD299: rgb(255 210 153), hsl(34 100% 80%), oklch(0.89 0.089 72.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Orange mean? → · Whipped Apricot color name →
#FFD299
oklch(0.89 0.089 72.9)
Kleurconversies
- HEX
- #ffd299
- RGB
- rgb(255 210 153)
- HSL
- hsl(34 100% 80%)
- HWB
- hwb(34 60% 0%)
- OKLCH
- oklch(0.89 0.089 72.9)
- OKLab
- oklab(0.89 0.026 0.085)
- CIE Lab
- lab(87.18 10.91 34.53)
- LCH
- lch(87.18 36.21 72.5)
- CMYK
- cmyk(0% 18% 40% 0%)
Tinten · Schaduwen · Tonen
Tinten
- FFD7A4
- FFDBAE
- FFE0B9
- FFE4C3
- FFE9CD
- FFEDD7
- FFF2E1
- FFF6EB
- FFFBF5
Schaduwen
- DEB684
- BE9B70
- 9E815D
- 80684A
- 635038
- 483927
- 2E2417
- 161008
- 030201
Tonen
- F2CA97
- E5C195
- D8B993
- CBB190
- BEA88E
- B1A08B
- A59889
- 989086
- 8C8883
Kleurharmonieën
Complementair +180°
- FFD299
Whipped Apricot
- C1DEFF
≈ Dithered Sky
Analoog -30° +30°
- FFD299
Whipped Apricot
- FFCEBB
≈ Dainty Peach
- E5DE99
≈ Celery Sceptre
Triadisch +120° +240°
- FFD299
Whipped Apricot
- 91EEEA
≈ Bath Water
- ECCDFF
≈ Sparkling Lavender
Gesplitst complementair +150° +210°
- FFD299
Whipped Apricot
- A3E6FF
≈ Winter Wizard
- D5D7FF
≈ Icy Plains
Tetradisch +90° +180° +270°
- FFD299
Whipped Apricot
- A4EECA
≈ Esoteric Touch Green
- C1DEFF
≈ Dithered Sky
- FFC8E8
≈ Soulmate Pink
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.40:1 · APCA Lc 20
Ag
AAAOp zwart
WCAG 14.93:1 · APCA Lc 84
Beste tekstkleur: #000000
WCAG 14.93:1 (AAA) · APCA Lc 84
Contrast pairs
Codefragmenten
CSS
:root {
--whipped-apricot: #ffd299;
--whipped-apricot-rgb: 255 210 153;
--whipped-apricot-oklch: oklch(0.89 0.089 72.9);
}
.element {
color: var(--whipped-apricot);
background-color: hsl(34 100% 80%);
border-color: oklch(0.89 0.089 72.9);
}Tailwind CSS v4
@theme {
--color-whipped-apricot: #ffd299;
--color-whipped-apricot-50: #fff2da;
--color-whipped-apricot-100: #fae4c8;
--color-whipped-apricot-200: #ebd0ab;
--color-whipped-apricot-300: #d3b185;
--color-whipped-apricot-400: #bf9662;
--color-whipped-apricot-500: #aa7c3e;
--color-whipped-apricot-600: #906936;
--color-whipped-apricot-700: #73542a;
--color-whipped-apricot-800: #563d1e;
--color-whipped-apricot-900: #3c2a13;
--color-whipped-apricot-950: #261705;
}SCSS
$whipped-apricot: #ffd299;
$whipped-apricot-rgb: 255, 210, 153;
$whipped-apricot-light: mix(#fff, $whipped-apricot, 20%);
$whipped-apricot-dark: mix(#000, $whipped-apricot, 20%);
.element {
color: $whipped-apricot;
box-shadow: 0 0 0 2px rgba($whipped-apricot, 0.35);
}