Color con nombre más cercano · #F67520
#F67520
Color con nombre más cercano: Apocalyptic Orange
#F67520 (rgb(246 117 32), hsl(24 92% 55%), oklch(0.704 0.181 47.9)) se parece más al color con nombre Apocalyptic Orange. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#F67520
oklch(0.704 0.181 47.9)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- F98442
- FB935B
- FDA171
- FFAF87
- FFBD9B
- FFCAAF
- FFD8C3
- FFE5D7
- FFF2EB
Sombras
- D6651A
- B75515
- 98460F
- 7B370A
- 5F2906
- 451C03
- 2C0F01
- 150500
- 030100
Tonos
- EB7834
- E07A41
- D47C4C
- C97D56
- BD7F5E
- B17F66
- A6806D
- 998074
- 8D807A
Armonías de color
Complementario +180°
- F67520
Apocalyptic Orange
- 00AFE2
≈ Royal Peacock
Análogo -30° +30°
- F67520
Apocalyptic Orange
- FB6874
≈ Kisses and Hugs
- D19200
≈ Elysium Gold
Triádico +120° +240°
- F67520
Apocalyptic Orange
- 00BB8E
≈ Slime Girl
- 9C8CFF
≈ Lavender Blue Shadow
Complementario dividido +150° +210°
- F67520
Apocalyptic Orange
- 00B6BA
≈ Cyan Sky
- 5E9FFF
≈ Blue Chaos
Tetrádico +90° +180° +270°
- F67520
Apocalyptic Orange
- 61B83C
≈ Skirret Green
- 00AFE2
≈ Royal Peacock
- CD76E7
≈ Fake Love
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.80:1 · APCA Lc 53
Ag
AAASobre negro
WCAG 7.48:1 · APCA Lc 49
Mejor color de texto: #000000
WCAG 7.48:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmentos de código
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);
}