Nazwany kolor · #FFD766
Yuzu Marmalade
Yuzu Marmalade to #FFD766: rgb(255 215 102), hsl(44 100% 70%), oklch(0.892 0.138 89.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Yuzu Marmalade color name →
#FFD766
oklch(0.892 0.138 89.9)
Konwersje koloru
- HEX
- #ffd766
- RGB
- rgb(255 215 102)
- HSL
- hsl(44 100% 70%)
- HWB
- hwb(44 40% 0%)
- OKLCH
- oklch(0.892 0.138 89.9)
- OKLab
- oklab(0.892 0 0.138)
- CIE Lab
- lab(87.86 5.27 59.84)
- LCH
- lch(87.86 60.08 85)
- CMYK
- cmyk(0% 16% 60% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFDB79
- FFE08A
- FFE49A
- FFE8AA
- FFECB9
- FFF0C7
- FFF4D5
- FFF8E3
- FFFBF1
Odcienie ciemniejsze
- DEBB58
- BE9F4A
- 9E853C
- 806B2F
- 635223
- 483B17
- 2E250C
- 161104
- 030200
Tony
- F2CE6C
- E4C570
- D7BD74
- CAB478
- BEAB7A
- B1A37C
- A59A7E
- 98917F
- 8C8980
Harmonie kolorów
Komplementarna +180°
- FFD766
Yuzu Marmalade
- CEDBFF
≈ Icy Plains
Analogowa -30° +30°
- FFD766
Yuzu Marmalade
- FFD1AD
≈ Papaya Whip
- D0E97C
≈ Sulu
Triada +120° +240°
- FFD766
Yuzu Marmalade
- 88EDFF
≈ Photon Projector
- FFC6F9
≈ Sugar Chic
Komplementarna rozszczepiona +150° +210°
- FFD766
Yuzu Marmalade
- B9E1FF
≈ Dithered Sky
- E1D3FF
≈ Pale Lavender
Tetrada +90° +180° +270°
- FFD766
Yuzu Marmalade
- 59F9DF
≈ Lamiaceae
- CEDBFF
≈ Icy Plains
- FFCBDA
≈ Linnet Egg Red
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.38:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.16:1 · APCA Lc 85
Najlepszy kolor tekstu: #000000
WCAG 15.16:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--yuzu-marmalade: #ffd766;
--yuzu-marmalade-rgb: 255 215 102;
--yuzu-marmalade-oklch: oklch(0.892 0.138 89.9);
}
.element {
color: var(--yuzu-marmalade);
background-color: hsl(44 100% 70%);
border-color: oklch(0.892 0.138 89.9);
}Tailwind CSS v4
@theme {
--color-yuzu-marmalade: #ffd766;
--color-yuzu-marmalade-50: #fff5c9;
--color-yuzu-marmalade-100: #f8e7b4;
--color-yuzu-marmalade-200: #e9d38f;
--color-yuzu-marmalade-300: #d1b55f;
--color-yuzu-marmalade-400: #be9a28;
--color-yuzu-marmalade-500: #aa8000;
--color-yuzu-marmalade-600: #8f6c00;
--color-yuzu-marmalade-700: #735600;
--color-yuzu-marmalade-800: #563e00;
--color-yuzu-marmalade-900: #3c2b00;
--color-yuzu-marmalade-950: #261800;
}SCSS
$yuzu-marmalade: #ffd766;
$yuzu-marmalade-rgb: 255, 215, 102;
$yuzu-marmalade-light: mix(#fff, $yuzu-marmalade, 20%);
$yuzu-marmalade-dark: mix(#000, $yuzu-marmalade, 20%);
.element {
color: $yuzu-marmalade;
box-shadow: 0 0 0 2px rgba($yuzu-marmalade, 0.35);
}