Nazwany kolor · #FFA474
Young Tangerine
Young Tangerine to #FFA474: rgb(255 164 116), hsl(21 100% 73%), oklch(0.8 0.125 48.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Young Tangerine color name →
#FFA474
oklch(0.8 0.125 48.1)
Konwersje koloru
- HEX
- #ffa474
- RGB
- rgb(255 164 116)
- HSL
- hsl(21 100% 73%)
- HWB
- hwb(21 45% 0%)
- OKLCH
- oklch(0.8 0.125 48.1)
- OKLab
- oklab(0.8 0.084 0.093)
- CIE Lab
- lab(76.02 31.17 39.46)
- LCH
- lch(76.02 50.28 51.7)
- CMYK
- cmyk(0% 36% 55% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFAD83
- FFB791
- FFC09F
- FFC9AD
- FFD2BA
- FFDBC8
- FFE4D6
- FFEDE4
- FFF6F1
Odcienie ciemniejsze
- DE8E64
- BE7954
- 9E6445
- 805037
- 633D29
- 482B1B
- 2E1A0F
- 160A05
- 030101
Tony
- F2A176
- E59E78
- D99A7A
- CC977B
- BF937D
- B38F7E
- A68C7F
- 9A887F
- 8D8480
Harmonie kolorów
Komplementarna +180°
- FFA474
Young Tangerine
- 56CDFD
≈ Thor’s Thunder
Analogowa -30° +30°
- FFA474
Young Tangerine
- FF9FA1
≈ Strawberry Frappé
- EAB358
≈ Sense of Wonder
Triada +120° +240°
- FFA474
Young Tangerine
- 5DD7AE
≈ Medium Aquamarine
- BAB3FF
≈ Greyish Lavender
Komplementarna rozszczepiona +150° +210°
- FFA474
Young Tangerine
- 37D6DB
≈ Aztec Turquoise
- 95C0FF
≈ Truesky Gloxym
Tetrada +90° +180° +270°
- FFA474
Young Tangerine
- 95D181
≈ Gossip
- 56CDFD
≈ Thor’s Thunder
- DFA3F2
≈ Petal Plush
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.94:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.81:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.81:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--young-tangerine: #ffa474;
--young-tangerine-rgb: 255 164 116;
--young-tangerine-oklch: oklch(0.8 0.125 48.1);
}
.element {
color: var(--young-tangerine);
background-color: hsl(21 100% 73%);
border-color: oklch(0.8 0.125 48.1);
}Tailwind CSS v4
@theme {
--color-young-tangerine: #ffa474;
--color-young-tangerine-50: #ffecd6;
--color-young-tangerine-100: #ffddc3;
--color-young-tangerine-200: #ffc5a4;
--color-young-tangerine-300: #eca57d;
--color-young-tangerine-400: #da865a;
--color-young-tangerine-500: #c76932;
--color-young-tangerine-600: #a8592c;
--color-young-tangerine-700: #874723;
--color-young-tangerine-800: #653319;
--color-young-tangerine-900: #472310;
--color-young-tangerine-950: #2e1103;
}SCSS
$young-tangerine: #ffa474;
$young-tangerine-rgb: 255, 164, 116;
$young-tangerine-light: mix(#fff, $young-tangerine, 20%);
$young-tangerine-dark: mix(#000, $young-tangerine, 20%);
.element {
color: $young-tangerine;
box-shadow: 0 0 0 2px rgba($young-tangerine, 0.35);
}