Màu có tên · #80CFE5
Summer Splash
Summer Splash là #80CFE5: rgb(128 207 229), hsl(193 66% 70%), oklch(0.811 0.084 217.5). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Cyan mean? → · Summer Splash color name →
#80CFE5
oklch(0.811 0.084 217.5)
Chuyển đổi màu
- HEX
- #80cfe5
- RGB
- rgb(128 207 229)
- HSL
- hsl(193 66% 70%)
- HWB
- hwb(193 50% 10%)
- OKLCH
- oklch(0.811 0.084 217.5)
- OKLab
- oklab(0.811 -0.066 -0.051)
- CIE Lab
- lab(78.63 -21.04 -18.98)
- LCH
- lch(78.63 28.34 222.1)
- CMYK
- cmyk(44% 10% 0% 10%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- 8ED4E8
- 9BD9EA
- A9DEED
- B5E3F0
- C2E7F2
- CEECF5
- DBF1F7
- E7F6FA
- F3FAFD
Sắc đậm
- 6EB4C7
- 5D99AA
- 4D7F8E
- 3D6772
- 2E4F58
- 1F383F
- 122328
- 061012
- 010203
Sắc xám
- 81C7DB
- 82BFD0
- 83B7C6
- 83AFBC
- 83A7B1
- 839FA7
- 83979D
- 829094
- 81888A
Hòa sắc
Bổ túc +180°
- 80CFE5
Summer Splash
- F2AF9B
≈ Stucco Wall
Tương đồng -30° +30°
- 80CFE5
Summer Splash
- 7FD3CB
≈ Water Wings
- 96C7F5
≈ Sail to the Sea
Bộ ba +120° +240°
- 80CFE5
Summer Splash
- E5ADD5
≈ Pink Plunge
- D0C283
≈ Winter Hazel
Bổ túc chia +150° +210°
- 80CFE5
Summer Splash
- F1ABB7
≈ Almond Blossom
- E6B887
≈ Bundle of Wheat
Bộ bốn +90° +180° +270°
- 80CFE5
Summer Splash
- D0B3EC
≈ Violet Heaven
- F2AF9B
≈ Stucco Wall
- B2CC92
≈ Marsh Fern
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.75:1 · APCA Lc 32
Ag
AAATrên nền đen
WCAG 11.97:1 · APCA Lc 71
Màu chữ tốt nhất: #000000
WCAG 11.97:1 (AAA) · APCA Lc 71
Contrast pairs
Đoạn mã
CSS
:root {
--summer-splash: #80cfe5;
--summer-splash-rgb: 128 207 229;
--summer-splash-oklch: oklch(0.811 0.084 217.5);
}
.element {
color: var(--summer-splash);
background-color: hsl(193 66% 70%);
border-color: oklch(0.811 0.084 217.5);
}Tailwind CSS v4
@theme {
--color-summer-splash: #80cfe5;
--color-summer-splash-50: #dcfbff;
--color-summer-splash-100: #caeffb;
--color-summer-splash-200: #addded;
--color-summer-splash-300: #86c2d5;
--color-summer-splash-400: #61abbf;
--color-summer-splash-500: #3793ab;
--color-summer-splash-600: #317d90;
--color-summer-splash-700: #276474;
--color-summer-splash-800: #194a55;
--color-summer-splash-900: #11333b;
--color-summer-splash-950: #031f25;
}SCSS
$summer-splash: #80cfe5;
$summer-splash-rgb: 128, 207, 229;
$summer-splash-light: mix(#fff, $summer-splash, 20%);
$summer-splash-dark: mix(#000, $summer-splash, 20%);
.element {
color: $summer-splash;
box-shadow: 0 0 0 2px rgba($summer-splash, 0.35);
}