Benannte Farbe · #F7BD81
Apricot Yellow
Apricot Yellow ist #F7BD81: rgb(247 189 129), hsl(31 88% 74%), oklch(0.838 0.102 66.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Apricot Yellow color name →
#F7BD81
oklch(0.838 0.102 66.6)
Farbumrechnungen
- HEX
- #f7bd81
- RGB
- rgb(247 189 129)
- HSL
- hsl(31 88% 74%)
- HWB
- hwb(31 51% 3%)
- OKLCH
- oklch(0.838 0.102 66.6)
- OKLab
- oklab(0.838 0.04 0.093)
- CIE Lab
- lab(81.02 16.36 38.72)
- LCH
- lch(81.02 42.03 67.1)
- CMYK
- cmyk(0% 23% 48% 3%)
Tints · Shades · Tones
Tints
- F8C48E
- F9CA9B
- FAD1A8
- FBD8B5
- FCDEC1
- FDE5CE
- FEECDA
- FEF2E6
- FFF9F3
Shades
- D7A46F
- B78C5E
- 99744E
- 7C5D3E
- 60472E
- 45331F
- 2C1F12
- 150D06
- 030201
Tones
- EBB782
- DFB182
- D2AB83
- C6A583
- BB9F83
- AF9883
- A39282
- 978C82
- 8C8681
Farbharmonien
Komplementär +180°
- F7BD81
Apricot Yellow
- 9CD0FF
≈ Baby Blue
Analog -30° +30°
- F7BD81
Apricot Yellow
- FFB5A0
≈ Persicus
- DDCA7B
≈ Sandwisp
Triadisch +120° +240°
- F7BD81
Apricot Yellow
- 73E0D4
≈ Shimmering Blue
- DBB9FE
≈ Lavender Fragrance
Geteilt komplementär +150° +210°
- F7BD81
Apricot Yellow
- 75DAF5
≈ Medium Sky Blue
- BCC6FF
≈ Light Periwinkle
Tetradisch +90° +180° +270°
- F7BD81
Apricot Yellow
- 91DEAF
≈ Dead 99
- 9CD0FF
≈ Baby Blue
- F5B1E2
≈ Hanami Pink
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.67:1 · APCA Lc 29
Ag
AAAAuf Schwarz
WCAG 12.55:1 · APCA Lc 73
Beste Textfarbe: #000000
WCAG 12.55:1 (AAA) · APCA Lc 73
Contrast pairs
Code-Snippets
CSS
:root {
--apricot-yellow: #f7bd81;
--apricot-yellow-rgb: 247 189 129;
--apricot-yellow-oklch: oklch(0.838 0.102 66.6);
}
.element {
color: var(--apricot-yellow);
background-color: hsl(31 88% 74%);
border-color: oklch(0.838 0.102 66.6);
}Tailwind CSS v4
@theme {
--color-apricot-yellow: #f7bd81;
--color-apricot-yellow-50: #fff1d7;
--color-apricot-yellow-100: #ffe2c4;
--color-apricot-yellow-200: #f2cda6;
--color-apricot-yellow-300: #daae7e;
--color-apricot-yellow-400: #c7925b;
--color-apricot-yellow-500: #b37733;
--color-apricot-yellow-600: #97652d;
--color-apricot-yellow-700: #795123;
--color-apricot-yellow-800: #5a3a19;
--color-apricot-yellow-900: #3f2810;
--color-apricot-yellow-950: #281603;
}SCSS
$apricot-yellow: #f7bd81;
$apricot-yellow-rgb: 247, 189, 129;
$apricot-yellow-light: mix(#fff, $apricot-yellow, 20%);
$apricot-yellow-dark: mix(#000, $apricot-yellow, 20%);
.element {
color: $apricot-yellow;
box-shadow: 0 0 0 2px rgba($apricot-yellow, 0.35);
}