Nazwany kolor · #F9603B
Vermilion Orange
Vermilion Orange to #F9603B: rgb(249 96 59), hsl(12 94% 60%), oklch(0.682 0.195 34.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Vermilion Orange color name →
#F9603B
oklch(0.682 0.195 34.8)
Konwersje koloru
- HEX
- #f9603b
- RGB
- rgb(249 96 59)
- HSL
- hsl(12 94% 60%)
- HWB
- hwb(12 23% 2%)
- OKLCH
- oklch(0.682 0.195 34.8)
- OKLab
- oklab(0.682 0.16 0.111)
- CIE Lab
- lab(61.42 58.22 52.01)
- LCH
- lch(61.42 78.07 41.8)
- CMYK
- cmyk(0% 61% 76% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FC7352
- FF8466
- FF957A
- FFA58D
- FFB4A0
- FFC3B3
- FFD3C6
- FFE1D9
- FFF0EC
Odcienie ciemniejsze
- D95232
- B94529
- 9A3821
- 7D2C19
- 612011
- 461509
- 2C0A04
- 150301
- 030000
Tony
- EE6645
- E36B4E
- D76F56
- CC735D
- C07664
- B4796A
- A87B70
- 9B7D76
- 8E7F7B
Harmonie kolorów
Komplementarna +180°
- F9603B
Vermilion Orange
- 00ABC7
≈ Pacific Blue
Analogowa -30° +30°
- F9603B
Vermilion Orange
- F55989
≈ Watermelon Juice
- D88100
≈ Orange Pepper
Triada +120° +240°
- F9603B
Vermilion Orange
- 00B668
≈ Future Hair
- 7C8DFF
≈ Lavender Blue Shadow
Komplementarna rozszczepiona +150° +210°
- F9603B
Vermilion Orange
- 00B0A2
≈ Billiard
- 00A0FA
≈ Fresh Blue of Bel Air
Tetrada +90° +180° +270°
- F9603B
Vermilion Orange
- 81AA00
≈ Fresh Lawn
- 00ABC7
≈ Pacific Blue
- B573F8
≈ Queer Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.10:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.76:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.76:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--vermilion-orange: #f9603b;
--vermilion-orange-rgb: 249 96 59;
--vermilion-orange-oklch: oklch(0.682 0.195 34.8);
}
.element {
color: var(--vermilion-orange);
background-color: hsl(12 94% 60%);
border-color: oklch(0.682 0.195 34.8);
}Tailwind CSS v4
@theme {
--color-vermilion-orange: #f9603b;
--color-vermilion-orange-50: #ffe2ce;
--color-vermilion-orange-100: #ffd2ba;
--color-vermilion-orange-200: #ffb699;
--color-vermilion-orange-300: #ff906d;
--color-vermilion-orange-400: #fb6a47;
--color-vermilion-orange-500: #ea3f0b;
--color-vermilion-orange-600: #c63810;
--color-vermilion-orange-700: #9f2c0e;
--color-vermilion-orange-800: #771e0d;
--color-vermilion-orange-900: #541408;
--color-vermilion-orange-950: #380400;
}SCSS
$vermilion-orange: #f9603b;
$vermilion-orange-rgb: 249, 96, 59;
$vermilion-orange-light: mix(#fff, $vermilion-orange, 20%);
$vermilion-orange-dark: mix(#000, $vermilion-orange, 20%);
.element {
color: $vermilion-orange;
box-shadow: 0 0 0 2px rgba($vermilion-orange, 0.35);
}