Nazwany kolor · #EE9685
Guava Jelly
Guava Jelly to #EE9685: rgb(238 150 133), hsl(10 76% 73%), oklch(0.759 0.11 31.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Guava Jelly color name →
#EE9685
oklch(0.759 0.11 31.6)
Konwersje koloru
- HEX
- #ee9685
- RGB
- rgb(238 150 133)
- HSL
- hsl(10 76% 73%)
- HWB
- hwb(10 52% 7%)
- OKLCH
- oklch(0.759 0.11 31.6)
- OKLab
- oklab(0.759 0.093 0.058)
- CIE Lab
- lab(71.08 32.62 23.6)
- LCH
- lch(71.08 40.26 35.9)
- CMYK
- cmyk(0% 37% 44% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F1A191
- F3AB9D
- F6B6A9
- F8C0B5
- F9CBC1
- FBD5CD
- FCE0DA
- FEEAE6
- FEF5F2
Odcienie ciemniejsze
- CF8273
- B16E61
- 935B50
- 774940
- 5C3730
- 422621
- 2A1613
- 140806
- 030101
Tony
- E39485
- D89285
- CD9084
- C28E84
- B88C83
- AD8A83
- A28882
- 978581
- 8B8381
Harmonie kolorów
Komplementarna +180°
- EE9685
Guava Jelly
- 4AC3D9
≈ Naxos Sky
Analogowa -30° +30°
- EE9685
Guava Jelly
- EB93AC
≈ Illusion
- E3A065
≈ India Trade
Triada +120° +240°
- EE9685
Guava Jelly
- 79C58D
≈ Green Gala
- 98ADF7
≈ Widowmaker
Komplementarna rozszczepiona +150° +210°
- EE9685
Guava Jelly
- 50C7B5
≈ Cockatoo
- 6DB9F0
≈ Norfolk Sky
Tetrada +90° +180° +270°
- EE9685
Guava Jelly
- A5BC6A
≈ Tan Green
- 4AC3D9
≈ Naxos Sky
- BDA0EB
≈ Lavender Cream
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.24:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.33:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--guava-jelly: #ee9685;
--guava-jelly-rgb: 238 150 133;
--guava-jelly-oklch: oklch(0.759 0.11 31.6);
}
.element {
color: var(--guava-jelly);
background-color: hsl(10 76% 73%);
border-color: oklch(0.759 0.11 31.6);
}Tailwind CSS v4
@theme {
--color-guava-jelly: #ee9685;
--color-guava-jelly-50: #ffebe1;
--color-guava-jelly-100: #ffdcd0;
--color-guava-jelly-200: #ffc4b6;
--color-guava-jelly-300: #eaa393;
--color-guava-jelly-400: #d78576;
--color-guava-jelly-500: #c46857;
--color-guava-jelly-600: #a6594a;
--color-guava-jelly-700: #85473b;
--color-guava-jelly-800: #63332b;
--color-guava-jelly-900: #45221d;
--color-guava-jelly-950: #2d110d;
}SCSS
$guava-jelly: #ee9685;
$guava-jelly-rgb: 238, 150, 133;
$guava-jelly-light: mix(#fff, $guava-jelly, 20%);
$guava-jelly-dark: mix(#000, $guava-jelly, 20%);
.element {
color: $guava-jelly;
box-shadow: 0 0 0 2px rgba($guava-jelly, 0.35);
}