Cor nomeada · #F68F37
Fire Flower
Fire Flower é #F68F37: rgb(246 143 55), hsl(28 91% 59%), oklch(0.746 0.158 56.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Fire Flower color name →
#F68F37
oklch(0.746 0.158 56.7)
Conversões de cor
- HEX
- #f68f37
- RGB
- rgb(246 143 55)
- HSL
- hsl(28 91% 59%)
- HWB
- hwb(28 22% 4%)
- OKLCH
- oklch(0.746 0.158 56.7)
- OKLab
- oklab(0.746 0.087 0.132)
- CIE Lab
- lab(69.77 35.46 61.37)
- LCH
- lch(69.77 70.88 60)
- CMYK
- cmyk(0% 42% 78% 4%)
Tons claros · Sombras · Tons
Tons claros
- F89B52
- FAA768
- FCB27C
- FDBD90
- FEC9A3
- FFD4B5
- FFDFC8
- FFE9DA
- FFF4ED
Sombras
- D67C2E
- B76926
- 98571E
- 7B4516
- 5F340F
- 452408
- 2C1503
- 150701
- 030100
Tons
- EA8E44
- DF8D4E
- D38C57
- C78B5F
- BC8A66
- B0886C
- A48672
- 988477
- 8C827C
Harmonias de cor
Complementar +180°
- F68F37
Fire Flower
- 2CB9FF
≈ Cherenkov Radiation
Análoga -30° +30°
- F68F37
Fire Flower
- FF8277
≈ Orange Tea Rose
- D6A500
≈ Golden Beryl Yellow
Tríade +120° +240°
- F68F37
Fire Flower
- 00C9AA
≈ Jadeite
- B797FF
≈ Liliac
Complementar dividida +150° +210°
- F68F37
Fire Flower
- 00C3D5
≈ The Crowd Roars!
- 87A9FF
≈ Fennel Flower
Tétrade +90° +180° +270°
- F68F37
Fire Flower
- 60C76E
≈ Verdant Oasis
- 2CB9FF
≈ Cherenkov Radiation
- E086E1
≈ Bright Lilac
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.35:1 · APCA Lc 46
Ag
AAASobre preto
WCAG 8.90:1 · APCA Lc 56
Melhor cor de texto: #000000
WCAG 8.90:1 (AAA) · APCA Lc 56
Contrast pairs
Trechos de código
CSS
:root {
--fire-flower: #f68f37;
--fire-flower-rgb: 246 143 55;
--fire-flower-oklch: oklch(0.746 0.158 56.7);
}
.element {
color: var(--fire-flower);
background-color: hsl(28 91% 59%);
border-color: oklch(0.746 0.158 56.7);
}Tailwind CSS v4
@theme {
--color-fire-flower: #f68f37;
--color-fire-flower-50: #ffebc9;
--color-fire-flower-100: #ffdcb4;
--color-fire-flower-200: #ffc490;
--color-fire-flower-300: #f3a260;
--color-fire-flower-400: #e3832f;
--color-fire-flower-500: #d16300;
--color-fire-flower-600: #b05400;
--color-fire-flower-700: #8e4300;
--color-fire-flower-800: #6a2f00;
--color-fire-flower-900: #4b2000;
--color-fire-flower-950: #310f00;
}SCSS
$fire-flower: #f68f37;
$fire-flower-rgb: 246, 143, 55;
$fire-flower-light: mix(#fff, $fire-flower, 20%);
$fire-flower-dark: mix(#000, $fire-flower, 20%);
.element {
color: $fire-flower;
box-shadow: 0 0 0 2px rgba($fire-flower, 0.35);
}