Nazwany kolor · #77B9DB
Pacific Harbour
Pacific Harbour to #77B9DB: rgb(119 185 219), hsl(200 58% 66%), oklch(0.754 0.083 231.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Pacific Harbour color name →
#77B9DB
oklch(0.754 0.083 231.8)
Konwersje koloru
- HEX
- #77b9db
- RGB
- rgb(119 185 219)
- HSL
- hsl(200 58% 66%)
- HWB
- hwb(200 47% 14%)
- OKLCH
- oklch(0.754 0.083 231.8)
- OKLab
- oklab(0.754 -0.051 -0.065)
- CIE Lab
- lab(71.68 -15.03 -24.13)
- LCH
- lch(71.68 28.42 238.1)
- CMYK
- cmyk(46% 16% 0% 14%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 85C0DF
- 93C7E3
- A1CEE6
- AFD5EA
- BCDCEE
- CAE3F1
- D7EAF5
- E4F1F8
- F2F8FC
Odcienie ciemniejsze
- 67A0BE
- 5789A2
- 477187
- 385B6D
- 2A4654
- 1C313C
- 101E26
- 050D11
- 010202
Tony
- 79B3D2
- 7BAEC8
- 7CA8BF
- 7DA2B6
- 7E9CAD
- 7F97A4
- 7F919B
- 808B92
- 808689
Harmonie kolorów
Komplementarna +180°
- 77B9DB
Pacific Harbour
- DAA17E
≈ Nice Tan
Analogowa -30° +30°
- 77B9DB
Pacific Harbour
- 6ABFC6
≈ Luna Moona
- 92B0E5
≈ Blue Skies Today
Triada +120° +240°
- 77B9DB
Pacific Harbour
- D99AB5
≈ Haute Pink
- B0B577
≈ Timothy Grass
Komplementarna rozszczepiona +150° +210°
- 77B9DB
Pacific Harbour
- DF9A98
≈ Blushing Bud
- CAAA71
≈ Gold Tweed
Tetrada +90° +180° +270°
- 77B9DB
Pacific Harbour
- C89ECF
≈ Lilac Lace
- DAA17E
≈ Nice Tan
- 92BD8C
≈ Tiki Monster
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.15:1 · APCA Lc 42
Ag
AAANa czerni
WCAG 9.74:1 · APCA Lc 60
Najlepszy kolor tekstu: #000000
WCAG 9.74:1 (AAA) · APCA Lc 60
Contrast pairs
Fragmenty kodu
CSS
:root {
--pacific-harbour: #77b9db;
--pacific-harbour-rgb: 119 185 219;
--pacific-harbour-oklch: oklch(0.754 0.083 231.8);
}
.element {
color: var(--pacific-harbour);
background-color: hsl(200 58% 66%);
border-color: oklch(0.754 0.083 231.8);
}Tailwind CSS v4
@theme {
--color-pacific-harbour: #77b9db;
--color-pacific-harbour-50: #dffaff;
--color-pacific-harbour-100: #ceedff;
--color-pacific-harbour-200: #b2dbf3;
--color-pacific-harbour-300: #8dbfdc;
--color-pacific-harbour-400: #6aa7c7;
--color-pacific-harbour-500: #4590b4;
--color-pacific-harbour-600: #3c7a98;
--color-pacific-harbour-700: #30617a;
--color-pacific-harbour-800: #20485a;
--color-pacific-harbour-900: #15323f;
--color-pacific-harbour-950: #061e28;
}SCSS
$pacific-harbour: #77b9db;
$pacific-harbour-rgb: 119, 185, 219;
$pacific-harbour-light: mix(#fff, $pacific-harbour, 20%);
$pacific-harbour-dark: mix(#000, $pacific-harbour, 20%);
.element {
color: $pacific-harbour;
box-shadow: 0 0 0 2px rgba($pacific-harbour, 0.35);
}