Nazwany kolor · #F8481C
Reddish Orange
Reddish Orange to #F8481C: rgb(248 72 28), hsl(12 94% 54%), oklch(0.652 0.219 34.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Reddish Orange color name →
#F8481C
oklch(0.652 0.219 34.3)
Konwersje koloru
- HEX
- #f8481c
- RGB
- rgb(248 72 28)
- HSL
- hsl(12 94% 54%)
- HWB
- hwb(12 11% 3%)
- OKLCH
- oklch(0.652 0.219 34.3)
- OKLab
- oklab(0.652 0.181 0.123)
- CIE Lab
- lab(57.66 66.26 62.51)
- LCH
- lch(57.66 91.1 43.3)
- CMYK
- cmyk(0% 71% 89% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FC603D
- FF7556
- FF886C
- FF9B82
- FFAC97
- FFBDAB
- FFCEC0
- FFDED5
- FFEFEA
Odcienie ciemniejsze
- D83D17
- B83312
- 9A290D
- 7C1F08
- 601605
- 450D02
- 2C0601
- 150200
- 030000
Tony
- ED532F
- E25B3D
- D76348
- CC6952
- C06E5B
- B57363
- A8776B
- 9C7A72
- 8E7D79
Harmonie kolorów
Komplementarna +180°
- F8481C
Reddish Orange
- 00A1BB
≈ January Blue
Analogowa -30° +30°
- F8481C
Reddish Orange
- F33F80
≈ Flamboyant Flamingo
- CC7900
≈ German Mustard
Triada +120° +240°
- F8481C
Reddish Orange
- 00AC60
≈ Go Green!
- 7081FF
≈ Orchid
Komplementarna rozszczepiona +150° +210°
- F8481C
Reddish Orange
- 00A698
≈ Tropical Sea
- 0097EA
≈ Pervenche
Tetrada +90° +180° +270°
- F8481C
Reddish Orange
- 7B9F00
≈ Support Green
- 00A1BB
≈ January Blue
- AE62F9
≈ Purple Hedonist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.53:1 · APCA Lc 62
Ag
AANa czerni
WCAG 5.93:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 5.93:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
CSS
:root {
--reddish-orange: #f8481c;
--reddish-orange-rgb: 248 72 28;
--reddish-orange-oklch: oklch(0.652 0.219 34.3);
}
.element {
color: var(--reddish-orange);
background-color: hsl(12 94% 54%);
border-color: oklch(0.652 0.219 34.3);
}Tailwind CSS v4
@theme {
--color-reddish-orange: #f8481c;
--color-reddish-orange-50: #ffe0ca;
--color-reddish-orange-100: #ffceb5;
--color-reddish-orange-200: #ffb191;
--color-reddish-orange-300: #ff8963;
--color-reddish-orange-400: #ff5f39;
--color-reddish-orange-500: #f52800;
--color-reddish-orange-600: #cf2600;
--color-reddish-orange-700: #a61f00;
--color-reddish-orange-800: #7d1301;
--color-reddish-orange-900: #580d02;
--color-reddish-orange-950: #3b0000;
}SCSS
$reddish-orange: #f8481c;
$reddish-orange-rgb: 248, 72, 28;
$reddish-orange-light: mix(#fff, $reddish-orange, 20%);
$reddish-orange-dark: mix(#000, $reddish-orange, 20%);
.element {
color: $reddish-orange;
box-shadow: 0 0 0 2px rgba($reddish-orange, 0.35);
}