Nazwany kolor · #F4A34C
Troll Slayer Orange
Troll Slayer Orange to #F4A34C: rgb(244 163 76), hsl(31 88% 63%), oklch(0.78 0.14 64.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Troll Slayer Orange color name →
#F4A34C
oklch(0.78 0.14 64.9)
Konwersje koloru
- HEX
- #f4a34c
- RGB
- rgb(244 163 76)
- HSL
- hsl(31 88% 63%)
- HWB
- hwb(31 30% 4%)
- OKLCH
- oklch(0.78 0.14 64.9)
- OKLab
- oklab(0.78 0.059 0.126)
- CIE Lab
- lab(74.08 25.36 56.41)
- LCH
- lch(74.08 61.85 65.8)
- CMYK
- cmyk(0% 33% 69% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F6AD62
- F8B675
- F9C088
- FBC999
- FCD2AB
- FDDBBC
- FEE4CD
- FEEDDE
- FFF6EE
Odcienie ciemniejsze
- D48D41
- B57836
- 97632C
- 7A4F22
- 5E3C18
- 442A0F
- 2B1906
- 140A02
- 030100
Tony
- E8A055
- DD9D5C
- D19A63
- C59668
- BA936D
- AE8F72
- A38C76
- 97887A
- 8C847D
Harmonie kolorów
Komplementarna +180°
- F4A34C
Troll Slayer Orange
- 71BFFF
≈ Green Darner Tail
Analogowa -30° +30°
- F4A34C
Troll Slayer Orange
- FF977D
≈ Vivid Tangerine
- D3B63C
≈ Oldies but Goldies
Triada +120° +240°
- F4A34C
Troll Slayer Orange
- 00D3C3
≈ Turquoise Panic
- CC9FFF
≈ Hydrangea Purple
Komplementarna rozszczepiona +150° +210°
- F4A34C
Troll Slayer Orange
- 00CDEE
≈ Picnic Day Sky
- A2B2FF
≈ Wondrous Wisteria
Tetrada +90° +180° +270°
- F4A34C
Troll Slayer Orange
- 64D18F
≈ Van Gogh Green
- 71BFFF
≈ Green Darner Tail
- EE94DB
≈ Love Dust
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.06:1 · APCA Lc 40
Ag
AAANa czerni
WCAG 10.18:1 · APCA Lc 62
Najlepszy kolor tekstu: #000000
WCAG 10.18:1 (AAA) · APCA Lc 62
Contrast pairs
Fragmenty kodu
CSS
:root {
--troll-slayer-orange: #f4a34c;
--troll-slayer-orange-rgb: 244 163 76;
--troll-slayer-orange-oklch: oklch(0.78 0.14 64.9);
}
.element {
color: var(--troll-slayer-orange);
background-color: hsl(31 88% 63%);
border-color: oklch(0.78 0.14 64.9);
}Tailwind CSS v4
@theme {
--color-troll-slayer-orange: #f4a34c;
--color-troll-slayer-orange-50: #ffeecb;
--color-troll-slayer-orange-100: #ffe0b7;
--color-troll-slayer-orange-200: #fdc994;
--color-troll-slayer-orange-300: #e7a966;
--color-troll-slayer-orange-400: #d68b38;
--color-troll-slayer-orange-500: #c36e00;
--color-troll-slayer-orange-600: #a55e00;
--color-troll-slayer-orange-700: #844b00;
--color-troll-slayer-orange-800: #633500;
--color-troll-slayer-orange-900: #462400;
--color-troll-slayer-orange-950: #2d1300;
}SCSS
$troll-slayer-orange: #f4a34c;
$troll-slayer-orange-rgb: 244, 163, 76;
$troll-slayer-orange-light: mix(#fff, $troll-slayer-orange, 20%);
$troll-slayer-orange-dark: mix(#000, $troll-slayer-orange, 20%);
.element {
color: $troll-slayer-orange;
box-shadow: 0 0 0 2px rgba($troll-slayer-orange, 0.35);
}