Nazwany kolor · #64B6E2
Sea Frolic
Sea Frolic to #64B6E2: rgb(100 182 226), hsl(201 68% 64%), oklch(0.741 0.102 233.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Sea Frolic color name →
#64B6E2
oklch(0.741 0.102 233.9)
Konwersje koloru
- HEX
- #64b6e2
- RGB
- rgb(100 182 226)
- HSL
- hsl(201 68% 64%)
- HWB
- hwb(201 39% 11%)
- OKLCH
- oklch(0.741 0.102 233.9)
- OKLab
- oklab(0.741 -0.06 -0.083)
- CIE Lab
- lab(70.16 -16.59 -30.32)
- LCH
- lch(70.16 34.56 241.3)
- CMYK
- cmyk(56% 19% 0% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 75BDE5
- 86C5E8
- 96CCEB
- A5D4EF
- B4DBF1
- C3E2F4
- D2E9F7
- E1F1FA
- F0F8FC
Odcienie ciemniejsze
- 569EC4
- 4886A8
- 3B6F8C
- 2E5971
- 224457
- 16303E
- 0B1D27
- 030C12
- 000203
Tony
- 69B1D8
- 6DABCE
- 71A6C4
- 74A1BA
- 779BB0
- 7996A7
- 7B909D
- 7D8B93
- 7F868A
Harmonie kolorów
Komplementarna +180°
- 64B6E2
Sea Frolic
- DE996C
≈ Candle Yellow
Analogowa -30° +30°
- 64B6E2
Sea Frolic
- 4CBEC9
≈ Water Sports
- 8AABEC
≈ Kitten’s Eye
Triada +120° +240°
- 64B6E2
Sea Frolic
- DE90B0
≈ Rosebloom
- AAB365
≈ April Green
Komplementarna rozszczepiona +150° +210°
- 64B6E2
Sea Frolic
- E5918C
≈ Strawberry Memory
- CAA65C
≈ Excitable
Tetrada +90° +180° +270°
- 64B6E2
Sea Frolic
- CB95D0
≈ Ineffable Magenta
- DE996C
≈ Candle Yellow
- 83BC82
≈ Greengage
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.25:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.33:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--sea-frolic: #64b6e2;
--sea-frolic-rgb: 100 182 226;
--sea-frolic-oklch: oklch(0.741 0.102 233.9);
}
.element {
color: var(--sea-frolic);
background-color: hsl(201 68% 64%);
border-color: oklch(0.741 0.102 233.9);
}Tailwind CSS v4
@theme {
--color-sea-frolic: #64b6e2;
--color-sea-frolic-50: #dafbff;
--color-sea-frolic-100: #c8eeff;
--color-sea-frolic-200: #abdcfb;
--color-sea-frolic-300: #83c0e5;
--color-sea-frolic-400: #5ca8d2;
--color-sea-frolic-500: #2f91bf;
--color-sea-frolic-600: #2a7aa1;
--color-sea-frolic-700: #216282;
--color-sea-frolic-800: #144860;
--color-sea-frolic-900: #0d3243;
--color-sea-frolic-950: #011e2b;
}SCSS
$sea-frolic: #64b6e2;
$sea-frolic-rgb: 100, 182, 226;
$sea-frolic-light: mix(#fff, $sea-frolic, 20%);
$sea-frolic-dark: mix(#000, $sea-frolic, 20%);
.element {
color: $sea-frolic;
box-shadow: 0 0 0 2px rgba($sea-frolic, 0.35);
}