Benannte Farbe · #F1CD9F
Capricious
Capricious ist #F1CD9F: rgb(241 205 159), hsl(34 75% 78%), oklch(0.868 0.072 73.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Capricious color name →
#F1CD9F
oklch(0.868 0.072 73.4)
Farbumrechnungen
- HEX
- #f1cd9f
- RGB
- rgb(241 205 159)
- HSL
- hsl(34 75% 78%)
- HWB
- hwb(34 62% 5%)
- OKLCH
- oklch(0.868 0.072 73.4)
- OKLab
- oklab(0.868 0.021 0.069)
- CIE Lab
- lab(84.71 8.39 27.92)
- LCH
- lch(84.71 29.16 73.3)
- CMYK
- cmyk(0% 15% 34% 5%)
Tints · Shades · Tones
Tints
- F3D2A9
- F4D7B2
- F6DCBC
- F7E1C6
- F8E6CF
- FAEBD9
- FBF0E2
- FCF5EC
- FEFAF5
Shades
- D2B28A
- B39875
- 957E61
- 79664D
- 5D4E3B
- 433829
- 2B2318
- 140F09
- 030201
Tones
- E5C59C
- DABD99
- CEB596
- C3AE93
- B7A690
- AC9E8D
- A1978A
- 968F87
- 8B8883
Farbharmonien
Komplementär +180°
- F1CD9F
Capricious
- B6D7FF
≈ Oh Boy!
Analog -30° +30°
- F1CD9F
Capricious
- FEC5AE
≈ Gadabout
- DBD69F
≈ Garden Glade
Triadisch +120° +240°
- F1CD9F
Capricious
- 9AE3E1
≈ Aqua Fiesta
- E5C6F6
≈ Wisteria Powder
Geteilt komplementär +150° +210°
- F1CD9F
Capricious
- 9FDFF7
≈ Non-Photo Blue
- CDCFFF
≈ Lavender Blue
Tetradisch +90° +180° +270°
- F1CD9F
Capricious
- A8E3C6
≈ Fabulous Find
- B6D7FF
≈ Oh Boy!
- F7C1E0
≈ Rosy Nectar
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.50:1 · APCA Lc 23
Ag
AAAAuf Schwarz
WCAG 13.97:1 · APCA Lc 80
Beste Textfarbe: #000000
WCAG 13.97:1 (AAA) · APCA Lc 80
Contrast pairs
Code-Snippets
CSS
:root {
--capricious: #f1cd9f;
--capricious-rgb: 241 205 159;
--capricious-oklch: oklch(0.868 0.072 73.4);
}
.element {
color: var(--capricious);
background-color: hsl(34 75% 78%);
border-color: oklch(0.868 0.072 73.4);
}Tailwind CSS v4
@theme {
--color-capricious: #f1cd9f;
--color-capricious-50: #fff3df;
--color-capricious-100: #f6e5ce;
--color-capricious-200: #e7d1b3;
--color-capricious-300: #cdb38e;
--color-capricious-400: #b9986e;
--color-capricious-500: #a37f4e;
--color-capricious-600: #8a6b43;
--color-capricious-700: #6f5635;
--color-capricious-800: #523e26;
--color-capricious-900: #392b19;
--color-capricious-950: #24180a;
}SCSS
$capricious: #f1cd9f;
$capricious-rgb: 241, 205, 159;
$capricious-light: mix(#fff, $capricious, 20%);
$capricious-dark: mix(#000, $capricious, 20%);
.element {
color: $capricious;
box-shadow: 0 0 0 2px rgba($capricious, 0.35);
}