Nazwany kolor · #3F5A5D
Otter Creek
Otter Creek to #3F5A5D: rgb(63 90 93), hsl(186 19% 31%), oklch(0.447 0.033 204.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Otter Creek color name →
#3F5A5D
oklch(0.447 0.033 204.7)
Konwersje koloru
- HEX
- #3f5a5d
- RGB
- rgb(63 90 93)
- HSL
- hsl(186 19% 31%)
- HWB
- hwb(186 25% 64%)
- OKLCH
- oklch(0.447 0.033 204.7)
- OKLab
- oklab(0.447 -0.03 -0.014)
- CIE Lab
- lab(36.17 -9.85 -5.17)
- LCH
- lch(36.17 11.12 207.7)
- CMYK
- cmyk(32% 3% 0% 64%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 51696C
- 63797B
- 75888A
- 88989A
- 9BA9AA
- AEBABB
- C2CBCB
- D6DCDC
- EAEDEE
Odcienie ciemniejsze
- 354D50
- 2C4143
- 233537
- 1B292A
- 121E1F
- 0A1314
- 04090A
- 010303
- 000000
Tony
- 465E60
- 4C6264
- 536567
- 59696B
- 606D6E
- 667172
- 6C7475
- 737879
- 797C7C
Harmonie kolorów
Komplementarna +180°
- 3F5A5D
Otter Creek
- 664E4C
≈ Robeson Rose
Analogowa -30° +30°
- 3F5A5D
Otter Creek
- 425B53
≈ Canadian Fir
- 435864
≈ Saxon Blue
Triada +120° +240°
- 3F5A5D
Otter Creek
- 5E4F5F
≈ Napa Grape
- 5D5340
≈ Hiking Boots
Komplementarna rozszczepiona +150° +210°
- 3F5A5D
Otter Creek
- 644D55
≈ Berry Wine
- 635044
≈ Gobo Brown
Tetrada +90° +180° +270°
- 3F5A5D
Otter Creek
- 555165
≈ Freefall
- 664E4C
≈ Robeson Rose
- 545742
≈ Freshwater Marsh
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.41:1 · APCA Lc 86
Ag
FailNa czerni
WCAG 2.83:1 · APCA Lc 16
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.41:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--otter-creek: #3f5a5d;
--otter-creek-rgb: 63 90 93;
--otter-creek-oklch: oklch(0.447 0.033 204.7);
}
.element {
color: var(--otter-creek);
background-color: hsl(186 19% 31%);
border-color: oklch(0.447 0.033 204.7);
}Tailwind CSS v4
@theme {
--color-otter-creek: #3f5a5d;
--color-otter-creek-50: #ebf8fa;
--color-otter-creek-100: #dcebed;
--color-otter-creek-200: #c5d8db;
--color-otter-creek-300: #a5bcc0;
--color-otter-creek-400: #89a4a7;
--color-otter-creek-500: #6d8d90;
--color-otter-creek-600: #5d777a;
--color-otter-creek-700: #4a5f62;
--color-otter-creek-800: #354647;
--color-otter-creek-900: #243031;
--color-otter-creek-950: #131d1d;
}SCSS
$otter-creek: #3f5a5d;
$otter-creek-rgb: 63, 90, 93;
$otter-creek-light: mix(#fff, $otter-creek, 20%);
$otter-creek-dark: mix(#000, $otter-creek, 20%);
.element {
color: $otter-creek;
box-shadow: 0 0 0 2px rgba($otter-creek, 0.35);
}