Nazwany kolor · #B2AC96
Svelte Sage
Svelte Sage to #B2AC96: rgb(178 172 150), hsl(47 15% 64%), oklch(0.743 0.031 94.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Svelte Sage color name →
#B2AC96
oklch(0.743 0.031 94.4)
Konwersje koloru
- HEX
- #b2ac96
- RGB
- rgb(178 172 150)
- HSL
- hsl(47 15% 64%)
- HWB
- hwb(47 59% 30%)
- OKLCH
- oklch(0.743 0.031 94.4)
- OKLab
- oklab(0.743 -0.002 0.031)
- CIE Lab
- lab(70.41 -0.58 12.18)
- LCH
- lch(70.41 12.19 92.7)
- CMYK
- cmyk(0% 3% 16% 30%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B9B4A0
- C1BCAA
- C9C4B5
- D0CDBF
- D8D5C9
- E0DDD4
- E7E6DF
- EFEEE9
- F7F6F4
Odcienie ciemniejsze
- 9A9582
- 837F6E
- 6D695B
- 575449
- 434037
- 2F2D26
- 1D1B16
- 0C0B08
- 010101
Tony
- ADA894
- A8A392
- A39F90
- 9E9A8D
- 99968B
- 949189
- 8F8D87
- 8A8984
- 858482
Harmonie kolorów
Komplementarna +180°
- B2AC96
Svelte Sage
- A5ABC0
≈ Lilac Time
Analogowa -30° +30°
- B2AC96
Svelte Sage
- BAA898
≈ Fashion District
- A7B09A
≈ Ending Spring
Triada +120° +240°
- B2AC96
Svelte Sage
- 96B1B8
≈ Mohair Soft Blue Grey
- B9A5B4
≈ Buckwheat Mauve
Komplementarna rozszczepiona +150° +210°
- B2AC96
Svelte Sage
- 9CAFBF
≈ Lost in Time
- B0A7BC
≈ Morning Mist Grey
Tetrada +90° +180° +270°
- B2AC96
Svelte Sage
- 97B3AE
≈ Lake Forest
- A5ABC0
≈ Lilac Time
- BEA4A9
≈ Cold Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.27:1 · APCA Lc 45
Ag
AAANa czerni
WCAG 9.23:1 · APCA Lc 57
Najlepszy kolor tekstu: #000000
WCAG 9.23:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmenty kodu
CSS
:root {
--svelte-sage: #b2ac96;
--svelte-sage-rgb: 178 172 150;
--svelte-sage-oklch: oklch(0.743 0.031 94.4);
}
.element {
color: var(--svelte-sage);
background-color: hsl(47 15% 64%);
border-color: oklch(0.743 0.031 94.4);
}Tailwind CSS v4
@theme {
--color-svelte-sage: #b2ac96;
--color-svelte-sage-50: #f7f5eb;
--color-svelte-sage-100: #ebe8dc;
--color-svelte-sage-200: #d8d4c6;
--color-svelte-sage-300: #bcb8a6;
--color-svelte-sage-400: #a49f8a;
--color-svelte-sage-500: #8d866f;
--color-svelte-sage-600: #77725e;
--color-svelte-sage-700: #5f5b4b;
--color-svelte-sage-800: #464236;
--color-svelte-sage-900: #302e25;
--color-svelte-sage-950: #1d1a14;
}SCSS
$svelte-sage: #b2ac96;
$svelte-sage-rgb: 178, 172, 150;
$svelte-sage-light: mix(#fff, $svelte-sage, 20%);
$svelte-sage-dark: mix(#000, $svelte-sage, 20%);
.element {
color: $svelte-sage;
box-shadow: 0 0 0 2px rgba($svelte-sage, 0.35);
}