Colore con nome · #64B6E2
Sea Frolic
Sea Frolic è #64B6E2: rgb(100 182 226), hsl(201 68% 64%), oklch(0.741 0.102 233.9). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Sea Frolic color name →
#64B6E2
oklch(0.741 0.102 233.9)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- 75BDE5
- 86C5E8
- 96CCEB
- A5D4EF
- B4DBF1
- C3E2F4
- D2E9F7
- E1F1FA
- F0F8FC
Ombre
- 569EC4
- 4886A8
- 3B6F8C
- 2E5971
- 224457
- 16303E
- 0B1D27
- 030C12
- 000203
Toni
- 69B1D8
- 6DABCE
- 71A6C4
- 74A1BA
- 779BB0
- 7996A7
- 7B909D
- 7D8B93
- 7F868A
Armonie di colore
Complementare +180°
- 64B6E2
Sea Frolic
- DE996C
≈ Candle Yellow
Analogo -30° +30°
- 64B6E2
Sea Frolic
- 4CBEC9
≈ Water Sports
- 8AABEC
≈ Kitten’s Eye
Triadico +120° +240°
- 64B6E2
Sea Frolic
- DE90B0
≈ Rosebloom
- AAB365
≈ April Green
Complementare divisa +150° +210°
- 64B6E2
Sea Frolic
- E5918C
≈ Strawberry Memory
- CAA65C
≈ Excitable
Tetradico +90° +180° +270°
- 64B6E2
Sea Frolic
- CB95D0
≈ Ineffable Magenta
- DE996C
≈ Candle Yellow
- 83BC82
≈ Greengage
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.25:1 · APCA Lc 44
Ag
AAASu nero
WCAG 9.33:1 · APCA Lc 58
Miglior colore del testo: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Frammenti di codice
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);
}