Nazwany kolor · #FFA857
Sailing Tangerine
Sailing Tangerine to #FFA857: rgb(255 168 87), hsl(29 100% 67%), oklch(0.803 0.141 61.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Sailing Tangerine color name →
#FFA857
oklch(0.803 0.141 61.4)
Konwersje koloru
- HEX
- #ffa857
- RGB
- rgb(255 168 87)
- HSL
- hsl(29 100% 67%)
- HWB
- hwb(29 34% 0%)
- OKLCH
- oklch(0.803 0.141 61.4)
- OKLab
- oklab(0.803 0.067 0.123)
- CIE Lab
- lab(76.62 27.77 54.51)
- LCH
- lch(76.62 61.17 63)
- CMYK
- cmyk(0% 34% 66% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFB16B
- FFBA7D
- FFC38E
- FFCC9F
- FFD5AF
- FFDDC0
- FFE6D0
- FFEEDF
- FFF7EF
Odcienie ciemniejsze
- DE924B
- BE7C3E
- 9E6733
- 805227
- 633F1C
- 482C12
- 2E1A08
- 160A03
- 030100
Tony
- F2A45E
- E5A164
- D99D69
- CC996E
- BF9572
- B39175
- A68D79
- 99897B
- 8D847E
Harmonie kolorów
Komplementarna +180°
- FFA857
Sailing Tangerine
- 7BC7FF
≈ Chromis Damsel Blue
Analogowa -30° +30°
- FFA857
Sailing Tangerine
- FFA391
≈ Tangerine Cream
- E0BB42
≈ Credo
Triada +120° +240°
- FFA857
Sailing Tangerine
- 1DDBC4
≈ Mint Morning
- CCACFF
≈ Purple Hepatica
Komplementarna rozszczepiona +150° +210°
- FFA857
Sailing Tangerine
- 00D6F2
≈ Thousand Sons Blue
- A7BBFF
≈ Pastel Blue
Tetrada +90° +180° +270°
- FFA857
Sailing Tangerine
- 73D890
≈ Aurora Green
- 7BC7FF
≈ Chromis Damsel Blue
- F39CE8
≈ Diva Mecha
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.91:1 · APCA Lc 36
Ag
AAANa czerni
WCAG 10.99:1 · APCA Lc 66
Najlepszy kolor tekstu: #000000
WCAG 10.99:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmenty kodu
CSS
:root {
--sailing-tangerine: #ffa857;
--sailing-tangerine-rgb: 255 168 87;
--sailing-tangerine-oklch: oklch(0.803 0.141 61.4);
}
.element {
color: var(--sailing-tangerine);
background-color: hsl(29 100% 67%);
border-color: oklch(0.803 0.141 61.4);
}Tailwind CSS v4
@theme {
--color-sailing-tangerine: #ffa857;
--color-sailing-tangerine-50: #ffedcc;
--color-sailing-tangerine-100: #ffdfb8;
--color-sailing-tangerine-200: #ffc895;
--color-sailing-tangerine-300: #eaa768;
--color-sailing-tangerine-400: #d9893b;
--color-sailing-tangerine-500: #c66c00;
--color-sailing-tangerine-600: #a75b00;
--color-sailing-tangerine-700: #874900;
--color-sailing-tangerine-800: #653400;
--color-sailing-tangerine-900: #472300;
--color-sailing-tangerine-950: #2e1200;
}SCSS
$sailing-tangerine: #ffa857;
$sailing-tangerine-rgb: 255, 168, 87;
$sailing-tangerine-light: mix(#fff, $sailing-tangerine, 20%);
$sailing-tangerine-dark: mix(#000, $sailing-tangerine, 20%);
.element {
color: $sailing-tangerine;
box-shadow: 0 0 0 2px rgba($sailing-tangerine, 0.35);
}