Nazwany kolor · #F28500
Tangerine Skin
Tangerine Skin to #F28500: rgb(242 133 0), hsl(33 100% 47%), oklch(0.722 0.172 58.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Tangerine Skin color name →
#F28500
oklch(0.722 0.172 58.5)
Konwersje koloru
- HEX
- #f28500
- RGB
- rgb(242 133 0)
- HSL
- hsl(33 100% 47%)
- HWB
- hwb(33 0% 5%)
- OKLCH
- oklch(0.722 0.172 58.5)
- OKLab
- oklab(0.722 0.09 0.147)
- CIE Lab
- lab(66.95 38.02 73.18)
- LCH
- lch(66.95 82.47 62.5)
- CMYK
- cmyk(0% 45% 100% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F59239
- F79F56
- F9AC6E
- FBB884
- FDC499
- FED0AE
- FFDCC2
- FFE8D7
- FFF3EB
Odcienie ciemniejsze
- D27300
- B46100
- 965000
- 794000
- 5E3000
- 432100
- 2B1300
- 140600
- 030100
Tony
- E78628
- DC863B
- D18648
- C58653
- BA855C
- AF8565
- A3846C
- 988373
- 8C827A
Harmonie kolorów
Komplementarna +180°
- F28500
Tangerine Skin
- 00B1FE
≈ Fantasy Console Sky
Analogowa -30° +30°
- F28500
Tangerine Skin
- FF7465
≈ Salmon
- CB9F00
≈ Lepton Gold
Triada +120° +240°
- F28500
Tangerine Skin
- 00C0A6
≈ Turquoise
- B48AFF
≈ Lilac Geode
Komplementarna rozszczepiona +150° +210°
- F28500
Tangerine Skin
- 00BACE
≈ Holiday Blue
- 80A0FF
≈ Periwinkle Blue
Tetrada +90° +180° +270°
- F28500
Tangerine Skin
- 45C264
≈ Algal Fuel
- 00B1FE
≈ Fantasy Console Sky
- DE7ADA
≈ Hibiscus Pop
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.58:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.13:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.13:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--tangerine-skin: #f28500;
--tangerine-skin-rgb: 242 133 0;
--tangerine-skin-oklch: oklch(0.722 0.172 58.5);
}
.element {
color: var(--tangerine-skin);
background-color: hsl(33 100% 47%);
border-color: oklch(0.722 0.172 58.5);
}Tailwind CSS v4
@theme {
--color-tangerine-skin: #f28500;
--color-tangerine-skin-50: #ffebc4;
--color-tangerine-skin-100: #ffdbae;
--color-tangerine-skin-200: #ffc387;
--color-tangerine-skin-300: #f7a154;
--color-tangerine-skin-400: #e7800f;
--color-tangerine-skin-500: #d55f00;
--color-tangerine-skin-600: #b45200;
--color-tangerine-skin-700: #914100;
--color-tangerine-skin-800: #6d2e00;
--color-tangerine-skin-900: #4c1f00;
--color-tangerine-skin-950: #320e00;
}SCSS
$tangerine-skin: #f28500;
$tangerine-skin-rgb: 242, 133, 0;
$tangerine-skin-light: mix(#fff, $tangerine-skin, 20%);
$tangerine-skin-dark: mix(#000, $tangerine-skin, 20%);
.element {
color: $tangerine-skin;
box-shadow: 0 0 0 2px rgba($tangerine-skin, 0.35);
}