Nazwany kolor · #F97306
Fire Dragon Bright
Fire Dragon Bright to #F97306: rgb(249 115 6), hsl(27 95% 50%), oklch(0.704 0.188 48.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Fire Dragon Bright color name →
#F97306
oklch(0.704 0.188 48.7)
Konwersje koloru
- HEX
- #f97306
- RGB
- rgb(249 115 6)
- HSL
- hsl(27 95% 50%)
- HWB
- hwb(27 2% 2%)
- OKLCH
- oklch(0.704 0.188 48.7)
- OKLab
- oklab(0.704 0.124 0.142)
- CIE Lab
- lab(64.47 49.25 71.65)
- LCH
- lch(64.47 86.95 55.5)
- CMYK
- cmyk(0% 54% 98% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FC8339
- FE9255
- FFA06D
- FFAF83
- FFBC98
- FFCAAD
- FFD7C1
- FFE5D6
- FFF2EA
Odcienie ciemniejsze
- D96304
- B95403
- 9A4502
- 7D3601
- 612801
- 461B00
- 2C0F00
- 150500
- 030100
Tony
- EE7629
- E2793A
- D67B47
- CB7D52
- BF7E5B
- B37F64
- A7806C
- 9A8073
- 8D807A
Harmonie kolorów
Komplementarna +180°
- F97306
Fire Dragon Bright
- 00AFE4
≈ Royal Peacock
Analogowa -30° +30°
- F97306
Fire Dragon Bright
- FF6471
≈ Kisses and Hugs
- D09300
≈ Elysium Gold
Triada +120° +240°
- F97306
Fire Dragon Bright
- 00BB90
≈ Mountain Meadow
- 9E8BFF
≈ Lavender Blue Shadow
Komplementarna rozszczepiona +150° +210°
- F97306
Fire Dragon Bright
- 00B6BB
≈ Cyan Sky
- 619FFF
≈ Blue Chaos
Tetrada +90° +180° +270°
- F97306
Fire Dragon Bright
- 5BBA38
≈ Exit Light
- 00AFE4
≈ Royal Peacock
- D073E9
≈ Fake Love
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.80:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.48:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.48:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--fire-dragon-bright: #f97306;
--fire-dragon-bright-rgb: 249 115 6;
--fire-dragon-bright-oklch: oklch(0.704 0.188 48.7);
}
.element {
color: var(--fire-dragon-bright);
background-color: hsl(27 95% 50%);
border-color: oklch(0.704 0.188 48.7);
}Tailwind CSS v4
@theme {
--color-fire-dragon-bright: #f97306;
--color-fire-dragon-bright-50: #ffe6c5;
--color-fire-dragon-bright-100: #ffd6af;
--color-fire-dragon-bright-200: #ffbc89;
--color-fire-dragon-bright-300: #ff9857;
--color-fire-dragon-bright-400: #f4751d;
--color-fire-dragon-bright-500: #e24f00;
--color-fire-dragon-bright-600: #bf4400;
--color-fire-dragon-bright-700: #9a3700;
--color-fire-dragon-bright-800: #732500;
--color-fire-dragon-bright-900: #511900;
--color-fire-dragon-bright-950: #360800;
}SCSS
$fire-dragon-bright: #f97306;
$fire-dragon-bright-rgb: 249, 115, 6;
$fire-dragon-bright-light: mix(#fff, $fire-dragon-bright, 20%);
$fire-dragon-bright-dark: mix(#000, $fire-dragon-bright, 20%);
.element {
color: $fire-dragon-bright;
box-shadow: 0 0 0 2px rgba($fire-dragon-bright, 0.35);
}