Nazwany kolor · #FFE1A0
Yellow Geranium
Yellow Geranium to #FFE1A0: rgb(255 225 160), hsl(41 100% 81%), oklch(0.92 0.089 85.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Yellow Geranium color name →
#FFE1A0
oklch(0.92 0.089 85.9)
Konwersje koloru
- HEX
- #ffe1a0
- RGB
- rgb(255 225 160)
- HSL
- hsl(41 100% 81%)
- HWB
- hwb(41 63% 0%)
- OKLCH
- oklch(0.92 0.089 85.9)
- OKLab
- oklab(0.92 0.006 0.088)
- CIE Lab
- lab(90.94 4.18 35.84)
- LCH
- lch(90.94 36.08 83.3)
- CMYK
- cmyk(0% 12% 37% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFE4AA
- FFE7B4
- FFEABE
- FFEDC7
- FFF0D1
- FFF3DA
- FFF6E3
- FFF9ED
- FFFCF6
Odcienie ciemniejsze
- DEC48B
- BEA776
- 9E8B61
- 80704E
- 63563B
- 483E29
- 2E2719
- 161209
- 030201
Tony
- F2D79D
- E4CD9B
- D7C398
- CAB995
- BEB092
- B1A68E
- A49C8B
- 989387
- 8C8984
Harmonie kolorów
Komplementarna +180°
- FFE1A0
Yellow Geranium
- D9E5FF
≈ Veiling Waterfalls
Analogowa -30° +30°
- FFE1A0
Yellow Geranium
- FFDDC6
≈ Coral Kiss
- E1ECA8
≈ Wedge of Lime
Triada +120° +240°
- FFE1A0
Yellow Geranium
- A2F5FF
≈ Waterspout
- FFD4FF
≈ Pink Diamond
Komplementarna rozszczepiona +150° +210°
- FFE1A0
Yellow Geranium
- C9EAFF
≈ Blue Java Banana
- E6DFFF
≈ Stoic White
Tetrada +90° +180° +270°
- FFE1A0
Yellow Geranium
- A3F8E2
≈ Icery
- D9E5FF
≈ Veiling Waterfalls
- FFD9E5
≈ Pink Supremecy
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.27:1 · APCA Lc 13
Ag
AAANa czerni
WCAG 16.52:1 · APCA Lc 91
Najlepszy kolor tekstu: #000000
WCAG 16.52:1 (AAA) · APCA Lc 91
Contrast pairs
Fragmenty kodu
CSS
:root {
--yellow-geranium: #ffe1a0;
--yellow-geranium-rgb: 255 225 160;
--yellow-geranium-oklch: oklch(0.92 0.089 85.9);
}
.element {
color: var(--yellow-geranium);
background-color: hsl(41 100% 81%);
border-color: oklch(0.92 0.089 85.9);
}Tailwind CSS v4
@theme {
--color-yellow-geranium: #ffe1a0;
--color-yellow-geranium-50: #fff4d9;
--color-yellow-geranium-100: #f4e7c7;
--color-yellow-geranium-200: #e4d3aa;
--color-yellow-geranium-300: #cab583;
--color-yellow-geranium-400: #b69b60;
--color-yellow-geranium-500: #a0823a;
--color-yellow-geranium-600: #886e33;
--color-yellow-geranium-700: #6d5828;
--color-yellow-geranium-800: #51401b;
--color-yellow-geranium-900: #382c12;
--color-yellow-geranium-950: #231904;
}SCSS
$yellow-geranium: #ffe1a0;
$yellow-geranium-rgb: 255, 225, 160;
$yellow-geranium-light: mix(#fff, $yellow-geranium, 20%);
$yellow-geranium-dark: mix(#000, $yellow-geranium, 20%);
.element {
color: $yellow-geranium;
box-shadow: 0 0 0 2px rgba($yellow-geranium, 0.35);
}