Nazwany kolor · #53778F
Melancholic Sea
Melancholic Sea to #53778F: rgb(83 119 143), hsl(204 27% 44%), oklch(0.552 0.055 238.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Melancholic Sea color name →
#53778F
oklch(0.552 0.055 238.3)
Konwersje koloru
- HEX
- #53778f
- RGB
- rgb(83 119 143)
- HSL
- hsl(204 27% 44%)
- HWB
- hwb(204 33% 44%)
- OKLCH
- oklch(0.552 0.055 238.3)
- OKLab
- oklab(0.552 -0.029 -0.047)
- CIE Lab
- lab(48.03 -8.23 -17.41)
- LCH
- lch(48.03 19.25 244.7)
- CMYK
- cmyk(42% 17% 0% 44%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 63849A
- 7491A5
- 859EB0
- 95ACBB
- A6B9C6
- B8C7D1
- C9D5DD
- DBE3E8
- EDF1F3
Odcienie ciemniejsze
- 47677C
- 3B5769
- 304757
- 253845
- 1B2A34
- 111C24
- 081015
- 020507
- 000101
Tony
- 58788E
- 5D798C
- 617A8B
- 667B89
- 6A7C88
- 6F7D86
- 737E85
- 777E83
- 7C7F82
Harmonie kolorów
Komplementarna +180°
- 53778F
Melancholic Sea
- 8B6A52
≈ Bean Pot
Analogowa -30° +30°
- 53778F
Melancholic Sea
- 497B83
≈ Submerged
- 647193
≈ Ocean Night
Triada +120° +240°
- 53778F
Melancholic Sea
- 8D6572
≈ Plum Dandy
- 6F7752
≈ Ranger Station
Komplementarna rozszczepiona +150° +210°
- 53778F
Melancholic Sea
- 906660
≈ Cloak of Mystery
- 7F714C
≈ Outrigger
Tetrada +90° +180° +270°
- 53778F
Melancholic Sea
- 846782
≈ Blackberry Jam
- 8B6A52
≈ Bean Pot
- 5C7B60
≈ Korean Mint
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.76:1 · APCA Lc 73
Ag
FailNa czerni
WCAG 4.40:1 · APCA Lc 29
Najlepszy kolor tekstu: #FFFFFF
WCAG 4.76:1 (AA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--melancholic-sea: #53778f;
--melancholic-sea-rgb: 83 119 143;
--melancholic-sea-oklch: oklch(0.552 0.055 238.3);
}
.element {
color: var(--melancholic-sea);
background-color: hsl(204 27% 44%);
border-color: oklch(0.552 0.055 238.3);
}Tailwind CSS v4
@theme {
--color-melancholic-sea: #53778f;
--color-melancholic-sea-50: #e8f8ff;
--color-melancholic-sea-100: #d8ebf9;
--color-melancholic-sea-200: #c0d8ea;
--color-melancholic-sea-300: #9fbcd1;
--color-melancholic-sea-400: #80a4bc;
--color-melancholic-sea-500: #638ca7;
--color-melancholic-sea-600: #54768d;
--color-melancholic-sea-700: #435f71;
--color-melancholic-sea-800: #304653;
--color-melancholic-sea-900: #20303a;
--color-melancholic-sea-950: #101c24;
}SCSS
$melancholic-sea: #53778f;
$melancholic-sea-rgb: 83, 119, 143;
$melancholic-sea-light: mix(#fff, $melancholic-sea, 20%);
$melancholic-sea-dark: mix(#000, $melancholic-sea, 20%);
.element {
color: $melancholic-sea;
box-shadow: 0 0 0 2px rgba($melancholic-sea, 0.35);
}