Najbliższy nazwany kolor · #173D46
#173D46
Najbliższy nazwany kolor: Sunken Harbour
#173D46 (rgb(23 61 70), hsl(191 51% 18%), oklch(0.337 0.045 215.7)) jest najbliższy nazwanemu kolorowi Sunken Harbour. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#173D46
oklch(0.337 0.045 215.7)
Konwersje koloru
- HEX
- #173d46
- RGB
- rgb(23 61 70)
- HSL
- hsl(191 51% 18%)
- HWB
- hwb(191 9% 73%)
- OKLCH
- oklch(0.337 0.045 215.7)
- OKLab
- oklab(0.337 -0.037 -0.027)
- CIE Lab
- lab(23.36 -11.59 -9.84)
- LCH
- lch(23.36 15.2 220.3)
- CMYK
- cmyk(67% 13% 0% 73%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 2D4E57
- 436068
- 597279
- 6F858B
- 86999E
- 9DACB0
- B5C0C4
- CDD5D7
- E6EAEB
Odcienie ciemniejsze
- 12343C
- 0E2B32
- 0A2228
- 061A1E
- 041215
- 020A0D
- 010405
- 000102
- 000000
Tony
- 23434C
- 2D4A51
- 385157
- 42575D
- 4C5E62
- 576568
- 616B6E
- 6B7274
- 76797A
Harmonie kolorów
Komplementarna +180°
- 173D46
Sunken Harbour
- 4C2F27
≈ Acajou
Analogowa -30° +30°
- 173D46
Sunken Harbour
- 173F3A
≈ Botanical Night
- 23394D
≈ Cool Air of Debonair
Triada +120° +240°
- 173D46
Sunken Harbour
- 462E40
≈ Voodoo
- 3E371A
≈ LeChuck’s Beard
Komplementarna rozszczepiona +150° +210°
- 173D46
Sunken Harbour
- 4B2D34
≈ Ripe Eggplant
- 47321D
≈ Iroko
Tetrada +90° +180° +270°
- 173D46
Sunken Harbour
- 3D314A
≈ Chrysomela Goettingensis
- 4C2F27
≈ Acajou
- 313B21
≈ Turtle Skin
Kontrast i dostępność
Ag
AAANa bieli
WCAG 11.71:1 · APCA Lc 97
Ag
FailNa czerni
WCAG 1.79:1 · APCA Lc 0
Najlepszy kolor tekstu: #FFFFFF
WCAG 11.71:1 (AAA) · APCA Lc 97
Contrast pairs
Fragmenty kodu
CSS
:root {
--sunken-harbour: #173d46;
--sunken-harbour-rgb: 23 61 70;
--sunken-harbour-oklch: oklch(0.337 0.045 215.7);
}
.element {
color: var(--sunken-harbour);
background-color: hsl(191 51% 18%);
border-color: oklch(0.337 0.045 215.7);
}Tailwind CSS v4
@theme {
--color-sunken-harbour: #173d46;
--color-sunken-harbour-50: #e8f9fe;
--color-sunken-harbour-100: #d8ecf2;
--color-sunken-harbour-200: #c0d9e1;
--color-sunken-harbour-300: #9ebec7;
--color-sunken-harbour-400: #80a6b0;
--color-sunken-harbour-500: #638e99;
--color-sunken-harbour-600: #547882;
--color-sunken-harbour-700: #436068;
--color-sunken-harbour-800: #30474c;
--color-sunken-harbour-900: #203135;
--color-sunken-harbour-950: #101d20;
}SCSS
$sunken-harbour: #173d46;
$sunken-harbour-rgb: 23, 61, 70;
$sunken-harbour-light: mix(#fff, $sunken-harbour, 20%);
$sunken-harbour-dark: mix(#000, $sunken-harbour, 20%);
.element {
color: $sunken-harbour;
box-shadow: 0 0 0 2px rgba($sunken-harbour, 0.35);
}