Nazwany kolor · #F1C78E
Skullcrusher Brass
Skullcrusher Brass to #F1C78E: rgb(241 199 142), hsl(35 78% 75%), oklch(0.853 0.087 74.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Skullcrusher Brass color name →
#F1C78E
oklch(0.853 0.087 74.7)
Konwersje koloru
- HEX
- #f1c78e
- RGB
- rgb(241 199 142)
- HSL
- hsl(35 78% 75%)
- HWB
- hwb(35 56% 5%)
- OKLCH
- oklch(0.853 0.087 74.7)
- OKLab
- oklab(0.853 0.023 0.084)
- CIE Lab
- lab(83 9.95 34.43)
- LCH
- lch(83 35.84 73.9)
- CMYK
- cmyk(0% 17% 41% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F3CD9A
- F4D2A5
- F6D8B1
- F7DEBC
- F9E3C7
- FAE9D2
- FBEEDE
- FDF4E9
- FEF9F4
Odcienie ciemniejsze
- D2AD7B
- B39368
- 957A56
- 796244
- 5D4C34
- 433624
- 2B2115
- 140E07
- 030201
Tony
- E5C08D
- DAB98C
- CEB18B
- C3AA8A
- B7A389
- AC9C87
- A19586
- 968E84
- 8B8782
Harmonie kolorów
Komplementarna +180°
- F1C78E
Skullcrusher Brass
- AED2FF
≈ Ice Cold Stare
Analogowa -30° +30°
- F1C78E
Skullcrusher Brass
- FFBEA1
≈ Sweet Apricot
- D7D28F
≈ Lemon Fennel
Triada +120° +240°
- F1C78E
Skullcrusher Brass
- 86E1E0
≈ Cold Blue
- E4BEF7
≈ Jane Purple
Komplementarna rozszczepiona +150° +210°
- F1C78E
Skullcrusher Brass
- 8EDCFA
≈ Tranquil Pool
- C9C9FF
≈ Lavender Blue
Tetrada +90° +180° +270°
- F1C78E
Skullcrusher Brass
- 97E1C0
≈ Green Gum
- AED2FF
≈ Ice Cold Stare
- F9B8DC
≈ Manga Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.57:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.30:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.30:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--skullcrusher-brass: #f1c78e;
--skullcrusher-brass-rgb: 241 199 142;
--skullcrusher-brass-oklch: oklch(0.853 0.087 74.7);
}
.element {
color: var(--skullcrusher-brass);
background-color: hsl(35 78% 75%);
border-color: oklch(0.853 0.087 74.7);
}Tailwind CSS v4
@theme {
--color-skullcrusher-brass: #f1c78e;
--color-skullcrusher-brass-50: #fff2da;
--color-skullcrusher-brass-100: #f9e5c8;
--color-skullcrusher-brass-200: #ead0ab;
--color-skullcrusher-brass-300: #d1b285;
--color-skullcrusher-brass-400: #bd9763;
--color-skullcrusher-brass-500: #a87d3e;
--color-skullcrusher-brass-600: #8e6a36;
--color-skullcrusher-brass-700: #72552b;
--color-skullcrusher-brass-800: #553d1e;
--color-skullcrusher-brass-900: #3b2a13;
--color-skullcrusher-brass-950: #251806;
}SCSS
$skullcrusher-brass: #f1c78e;
$skullcrusher-brass-rgb: 241, 199, 142;
$skullcrusher-brass-light: mix(#fff, $skullcrusher-brass, 20%);
$skullcrusher-brass-dark: mix(#000, $skullcrusher-brass, 20%);
.element {
color: $skullcrusher-brass;
box-shadow: 0 0 0 2px rgba($skullcrusher-brass, 0.35);
}