En yakın adlandırılmış renk · #553F1F
#553F1F
En yakın adlandırılmış renk: Avocado Stone
#553F1F (rgb(85 63 31), hsl(36 47% 23%), oklch(0.384 0.056 75.1)) en çok Avocado Stone adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#553F1F
oklch(0.384 0.056 75.1)
Renk dönüşümleri
- HEX
- #553f1f
- RGB
- rgb(85 63 31)
- HSL
- hsl(36 47% 23%)
- HWB
- hwb(36 12% 67%)
- OKLCH
- oklch(0.384 0.056 75.1)
- OKLab
- oklab(0.384 0.014 0.054)
- CIE Lab
- lab(28.56 6.86 23.23)
- LCH
- lch(28.56 24.22 73.6)
- CMYK
- cmyk(0% 26% 64% 67%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 655034
- 756248
- 85745E
- 968773
- A69A89
- B8ADA0
- C9C1B7
- DBD6CE
- EDEAE7
Koyu tonlar
- 493519
- 3D2C14
- 31230F
- 261B0A
- 1C1206
- 110A03
- 080401
- 020100
- 000000
Gri tonlar
- 594529
- 5E4C33
- 62523C
- 665946
- 6B5F50
- 6F6659
- 736C63
- 77736C
- 7C7976
Renk uyumları
Tamamlayıcı +180°
- 553F1F
Avocado Stone
- 2F4561
≈ Stay the Night
Analog -30° +30°
- 553F1F
Avocado Stone
- 5C3A2A
≈ Cioccolato
- 484520
≈ Uniform Green
Üçlü +120° +240°
- 553F1F
Avocado Stone
- 154D4D
≈ Port Malmesbury
- 4F3A58
≈ Dark Blackberry
Bölünmüş tamamlayıcı +150° +210°
- 553F1F
Avocado Stone
- 1D4A5A
≈ Ethereal Dance
- 403F60
≈ Church Blue
Dörtlü +90° +180° +270°
- 553F1F
Avocado Stone
- 234D3C
≈ Springbok Green
- 2F4561
≈ Stay the Night
- 59374A
≈ Dulcet Violet
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 9.91:1 · APCA Lc 93
Ag
FailSiyah üzerinde
WCAG 2.11:1 · APCA Lc 10
En iyi metin rengi: #FFFFFF
WCAG 9.91:1 (AAA) · APCA Lc 93
Contrast pairs
Kod parçacıkları
CSS
:root {
--avocado-stone: #553f1f;
--avocado-stone-rgb: 85 63 31;
--avocado-stone-oklch: oklch(0.384 0.056 75.1);
}
.element {
color: var(--avocado-stone);
background-color: hsl(36 47% 23%);
border-color: oklch(0.384 0.056 75.1);
}Tailwind CSS v4
@theme {
--color-avocado-stone: #553f1f;
--color-avocado-stone-50: #fef3e4;
--color-avocado-stone-100: #f3e6d4;
--color-avocado-stone-200: #e2d2ba;
--color-avocado-stone-300: #c8b498;
--color-avocado-stone-400: #b29a7a;
--color-avocado-stone-500: #9c815c;
--color-avocado-stone-600: #846d4e;
--color-avocado-stone-700: #6a573e;
--color-avocado-stone-800: #4e3f2d;
--color-avocado-stone-900: #372c1e;
--color-avocado-stone-950: #21190e;
}SCSS
$avocado-stone: #553f1f;
$avocado-stone-rgb: 85, 63, 31;
$avocado-stone-light: mix(#fff, $avocado-stone, 20%);
$avocado-stone-dark: mix(#000, $avocado-stone, 20%);
.element {
color: $avocado-stone;
box-shadow: 0 0 0 2px rgba($avocado-stone, 0.35);
}