Nazwany kolor · #4C3D30
Simmered Seaweed
Simmered Seaweed to #4C3D30: rgb(76 61 48), hsl(28 23% 24%), oklch(0.372 0.03 62.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Simmered Seaweed color name →
#4C3D30
oklch(0.372 0.03 62.6)
Konwersje koloru
- HEX
- #4c3d30
- RGB
- rgb(76 61 48)
- HSL
- hsl(28 23% 24%)
- HWB
- hwb(28 19% 70%)
- OKLCH
- oklch(0.372 0.03 62.6)
- OKLab
- oklab(0.372 0.014 0.027)
- CIE Lab
- lab(27.11 5.14 10.64)
- LCH
- lch(27.11 11.82 64.2)
- CMYK
- cmyk(0% 20% 37% 70%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 5C4E42
- 6D6055
- 7E7268
- 8F857C
- A19891
- B3ACA6
- C6C0BC
- D9D5D2
- ECEAE8
Odcienie ciemniejsze
- 413428
- 362B21
- 2C221A
- 221A13
- 18120C
- 0F0A06
- 060403
- 020101
- 000000
Tony
- 514338
- 564A3F
- 5B5047
- 61574F
- 665E57
- 6B645F
- 706B67
- 75726F
- 7B7978
Harmonie kolorów
Komplementarna +180°
- 4C3D30
Simmered Seaweed
- 33424F
≈ Midnight Navy
Analogowa -30° +30°
- 4C3D30
Simmered Seaweed
- 4F3B36
≈ Royal Brown
- 46402E
≈ Flirtatious Indigo Tea
Triada +120° +240°
- 4C3D30
Simmered Seaweed
- 2E4642
≈ Gable Green
- 433D4E
≈ Plum Island
Komplementarna rozszczepiona +150° +210°
- 4C3D30
Simmered Seaweed
- 2E454A
≈ Little Mermaid
- 3B4051
≈ Lava Stone
Tetrada +90° +180° +270°
- 4C3D30
Simmered Seaweed
- 344539
≈ Bracken Fern
- 33424F
≈ Midnight Navy
- 4A3B47
≈ Funkie Friday
Kontrast i dostępność
Ag
AAANa bieli
WCAG 10.40:1 · APCA Lc 94
Ag
FailNa czerni
WCAG 2.01:1 · APCA Lc 8
Najlepszy kolor tekstu: #FFFFFF
WCAG 10.40:1 (AAA) · APCA Lc 94
Contrast pairs
Fragmenty kodu
CSS
:root {
--simmered-seaweed: #4c3d30;
--simmered-seaweed-rgb: 76 61 48;
--simmered-seaweed-oklch: oklch(0.372 0.03 62.6);
}
.element {
color: var(--simmered-seaweed);
background-color: hsl(28 23% 24%);
border-color: oklch(0.372 0.03 62.6);
}Tailwind CSS v4
@theme {
--color-simmered-seaweed: #4c3d30;
--color-simmered-seaweed-50: #fbf4ec;
--color-simmered-seaweed-100: #efe6de;
--color-simmered-seaweed-200: #ded2c7;
--color-simmered-seaweed-300: #c3b5a8;
--color-simmered-seaweed-400: #ac9b8d;
--color-simmered-seaweed-500: #958272;
--color-simmered-seaweed-600: #7e6e61;
--color-simmered-seaweed-700: #65584d;
--color-simmered-seaweed-800: #4a4038;
--color-simmered-seaweed-900: #342c26;
--color-simmered-seaweed-950: #1f1915;
}SCSS
$simmered-seaweed: #4c3d30;
$simmered-seaweed-rgb: 76, 61, 48;
$simmered-seaweed-light: mix(#fff, $simmered-seaweed, 20%);
$simmered-seaweed-dark: mix(#000, $simmered-seaweed, 20%);
.element {
color: $simmered-seaweed;
box-shadow: 0 0 0 2px rgba($simmered-seaweed, 0.35);
}