Colore con nome · #F78058
Bonfire
Bonfire è #F78058: rgb(247 128 88), hsl(15 91% 66%), oklch(0.727 0.156 39.1). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Bonfire color name →
#F78058
oklch(0.727 0.156 39.1)
Conversioni di colore
- HEX
- #f78058
- RGB
- rgb(247 128 88)
- HSL
- hsl(15 91% 66%)
- HWB
- hwb(15 35% 3%)
- OKLCH
- oklch(0.727 0.156 39.1)
- OKLab
- oklab(0.727 0.121 0.098)
- CIE Lab
- lab(67.1 44.23 43.12)
- LCH
- lch(67.1 61.77 44.3)
- CMYK
- cmyk(0% 48% 64% 3%)
Tinte · Ombre · Toni
Tinte
- F98E6A
- FC9B7B
- FDA88C
- FFB59C
- FFC1AD
- FFCEBD
- FFDACD
- FFE6DE
- FFF3EE
Ombre
- D76E4B
- B75D3F
- 994D33
- 7C3D28
- 602E1D
- 451F12
- 2C1209
- 150603
- 030100
Toni
- EC815E
- E08263
- D48267
- C9836C
- BD8370
- B18373
- A58277
- 99827A
- 8D817D
Armonie di colore
Complementare +180°
- F78058
Bonfire
- 00B9DE
≈ Maldives
Analogo -30° +30°
- F78058
Bonfire
- F77892
≈ Carnation
- E4920E
≈ Beige Red
Triadico +120° +240°
- F78058
Bonfire
- 2BC482
≈ Píng Gǔo Lǜ Green
- 949BFF
≈ Cobalite
Complementare divisa +150° +210°
- F78058
Bonfire
- 00BFB7
≈ Turquoise Topaz
- 53ACFF
≈ Joust Blue
Tetradico +90° +180° +270°
- F78058
Bonfire
- 88B944
≈ Spring Sprout
- 00B9DE
≈ Maldives
- C389F0
≈ Liliac
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.56:1 · APCA Lc 50
Ag
AAASu nero
WCAG 8.18:1 · APCA Lc 52
Miglior colore del testo: #000000
WCAG 8.18:1 (AAA) · APCA Lc 52
Contrast pairs
Frammenti di codice
CSS
:root {
--bonfire: #f78058;
--bonfire-rgb: 247 128 88;
--bonfire-oklch: oklch(0.727 0.156 39.1);
}
.element {
color: var(--bonfire);
background-color: hsl(15 91% 66%);
border-color: oklch(0.727 0.156 39.1);
}Tailwind CSS v4
@theme {
--color-bonfire: #f78058;
--color-bonfire-50: #ffe7d3;
--color-bonfire-100: #ffd7c0;
--color-bonfire-200: #ffbea1;
--color-bonfire-300: #fb9b78;
--color-bonfire-400: #ea7a55;
--color-bonfire-500: #d8582a;
--color-bonfire-600: #b64c25;
--color-bonfire-700: #933c1e;
--color-bonfire-800: #6e2a16;
--color-bonfire-900: #4d1d0e;
--color-bonfire-950: #330c02;
}SCSS
$bonfire: #f78058;
$bonfire-rgb: 247, 128, 88;
$bonfire-light: mix(#fff, $bonfire, 20%);
$bonfire-dark: mix(#000, $bonfire, 20%);
.element {
color: $bonfire;
box-shadow: 0 0 0 2px rgba($bonfire, 0.35);
}