Dichtstbijzijnde benoemde kleur · #F67520
#F67520
Dichtstbijzijnde benoemde kleur: Apocalyptic Orange
#F67520 (rgb(246 117 32), hsl(24 92% 55%), oklch(0.704 0.181 47.9)) komt het dichtst bij de benoemde kleur Apocalyptic Orange. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#F67520
oklch(0.704 0.181 47.9)
Kleurconversies
- HEX
- #f67520
- RGB
- rgb(246 117 32)
- HSL
- hsl(24 92% 55%)
- HWB
- hwb(24 13% 4%)
- OKLCH
- oklch(0.704 0.181 47.9)
- OKLab
- oklab(0.704 0.121 0.134)
- CIE Lab
- lab(64.44 47.45 65.51)
- LCH
- lch(64.44 80.89 54.1)
- CMYK
- cmyk(0% 52% 87% 4%)
Tinten · Schaduwen · Tonen
Tinten
- F98442
- FB935B
- FDA171
- FFAF87
- FFBD9B
- FFCAAF
- FFD8C3
- FFE5D7
- FFF2EB
Schaduwen
- D6651A
- B75515
- 98460F
- 7B370A
- 5F2906
- 451C03
- 2C0F01
- 150500
- 030100
Tonen
- EB7834
- E07A41
- D47C4C
- C97D56
- BD7F5E
- B17F66
- A6806D
- 998074
- 8D807A
Kleurharmonieën
Complementair +180°
- F67520
Apocalyptic Orange
- 00AFE2
≈ Royal Peacock
Analoog -30° +30°
- F67520
Apocalyptic Orange
- FB6874
≈ Kisses and Hugs
- D19200
≈ Elysium Gold
Triadisch +120° +240°
- F67520
Apocalyptic Orange
- 00BB8E
≈ Slime Girl
- 9C8CFF
≈ Lavender Blue Shadow
Gesplitst complementair +150° +210°
- F67520
Apocalyptic Orange
- 00B6BA
≈ Cyan Sky
- 5E9FFF
≈ Blue Chaos
Tetradisch +90° +180° +270°
- F67520
Apocalyptic Orange
- 61B83C
≈ Skirret Green
- 00AFE2
≈ Royal Peacock
- CD76E7
≈ Fake Love
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.80:1 · APCA Lc 53
Ag
AAAOp zwart
WCAG 7.48:1 · APCA Lc 49
Beste tekstkleur: #000000
WCAG 7.48:1 (AAA) · APCA Lc 49
Contrast pairs
Codefragmenten
CSS
:root {
--apocalyptic-orange: #f67520;
--apocalyptic-orange-rgb: 246 117 32;
--apocalyptic-orange-oklch: oklch(0.704 0.181 47.9);
}
.element {
color: var(--apocalyptic-orange);
background-color: hsl(24 92% 55%);
border-color: oklch(0.704 0.181 47.9);
}Tailwind CSS v4
@theme {
--color-apocalyptic-orange: #f67520;
--color-apocalyptic-orange-50: #ffe7c7;
--color-apocalyptic-orange-100: #ffd7b2;
--color-apocalyptic-orange-200: #ffbd8d;
--color-apocalyptic-orange-300: #ff9a5d;
--color-apocalyptic-orange-400: #f1772c;
--color-apocalyptic-orange-500: #df5200;
--color-apocalyptic-orange-600: #bd4700;
--color-apocalyptic-orange-700: #983900;
--color-apocalyptic-orange-800: #722700;
--color-apocalyptic-orange-900: #501a00;
--color-apocalyptic-orange-950: #350900;
}SCSS
$apocalyptic-orange: #f67520;
$apocalyptic-orange-rgb: 246, 117, 32;
$apocalyptic-orange-light: mix(#fff, $apocalyptic-orange, 20%);
$apocalyptic-orange-dark: mix(#000, $apocalyptic-orange, 20%);
.element {
color: $apocalyptic-orange;
box-shadow: 0 0 0 2px rgba($apocalyptic-orange, 0.35);
}