Cor nomeada mais próxima · #F17A02
#F17A02
Cor nomeada mais próxima: Retro Nectarine
#F17A02 (rgb(241 122 2), hsl(30 98% 48%), oklch(0.703 0.177 53.5)) é mais próxima da cor nomeada Retro Nectarine. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#F17A02
oklch(0.703 0.177 53.5)
Conversões de cor
- HEX
- #f17a02
- RGB
- rgb(241 122 2)
- HSL
- hsl(30 98% 48%)
- HWB
- hwb(30 1% 5%)
- OKLCH
- oklch(0.703 0.177 53.5)
- OKLab
- oklab(0.703 0.105 0.142)
- CIE Lab
- lab(64.59 42.94 71.54)
- LCH
- lch(64.59 83.44 59)
- CMYK
- cmyk(0% 49% 99% 5%)
Tons claros · Sombras · Tons
Tons claros
- F48938
- F79754
- F9A46C
- FBB282
- FDBF98
- FECCAD
- FFD9C1
- FFE6D6
- FFF2EA
Sombras
- D26901
- B35901
- 954901
- 793A00
- 5D2B00
- 431D00
- 2B1000
- 140500
- 030100
Tons
- E67C28
- DB7E3A
- D07F47
- C58052
- BA815B
- AF8164
- A4816B
- 988173
- 8C817A
Harmonias de cor
Complementar +180°
- F17A02
Retro Nectarine
- 00ADEB
≈ Vivid Cerulean
Análoga -30° +30°
- F17A02
Retro Nectarine
- FA6A68
≈ Pompelmo
- CA9600
≈ Retro Vibe
Tríade +120° +240°
- F17A02
Retro Nectarine
- 00BA98
≈ Aoife’s Green
- A687FF
≈ Lilac Geode
Complementar dividida +150° +210°
- F17A02
Retro Nectarine
- 00B5C1
≈ Lago Blue
- 6C9CFF
≈ Blue Chaos
Tétrade +90° +180° +270°
- F17A02
Retro Nectarine
- 4FBA4F
≈ Classic Green
- 00ADEB
≈ Vivid Cerulean
- D374DD
≈ Jewel Caterpillar
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.79:1 · APCA Lc 53
Ag
AAASobre preto
WCAG 7.52:1 · APCA Lc 49
Melhor cor de texto: #000000
WCAG 7.52:1 (AAA) · APCA Lc 49
Contrast pairs
Trechos de código
CSS
:root {
--retro-nectarine: #f17a02;
--retro-nectarine-rgb: 241 122 2;
--retro-nectarine-oklch: oklch(0.703 0.177 53.5);
}
.element {
color: var(--retro-nectarine);
background-color: hsl(30 98% 48%);
border-color: oklch(0.703 0.177 53.5);
}Tailwind CSS v4
@theme {
--color-retro-nectarine: #f17a02;
--color-retro-nectarine-50: #ffe9c5;
--color-retro-nectarine-100: #ffd9af;
--color-retro-nectarine-200: #ffc089;
--color-retro-nectarine-300: #fc9d57;
--color-retro-nectarine-400: #ec7c1c;
--color-retro-nectarine-500: #db5900;
--color-retro-nectarine-600: #b94c00;
--color-retro-nectarine-700: #943d00;
--color-retro-nectarine-800: #6f2a00;
--color-retro-nectarine-900: #4f1d00;
--color-retro-nectarine-950: #340c00;
}SCSS
$retro-nectarine: #f17a02;
$retro-nectarine-rgb: 241, 122, 2;
$retro-nectarine-light: mix(#fff, $retro-nectarine, 20%);
$retro-nectarine-dark: mix(#000, $retro-nectarine, 20%);
.element {
color: $retro-nectarine;
box-shadow: 0 0 0 2px rgba($retro-nectarine, 0.35);
}