命名颜色 · #80CFE5

Summer Splash

Summer Splash 即 #80CFE5：rgb(128 207 229)、hsl(193 66% 70%)、oklch(0.811 0.084 217.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Cyan mean? → · Summer Splash color name →

#80CFE5

oklch(0.811 0.084 217.5)

颜色转换

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%)

浅色调 · 深色调 · 灰色调

浅色调

8ED4E8
9BD9EA
A9DEED
B5E3F0
C2E7F2
CEECF5
DBF1F7
E7F6FA
F3FAFD

深色调

6EB4C7
5D99AA
4D7F8E
3D6772
2E4F58
1F383F
122328
061012
010203

灰色调

81C7DB
82BFD0
83B7C6
83AFBC
83A7B1
839FA7
83979D
829094
81888A

配色和谐

互补色 +180°

80CFE5
Summer Splash
F2AF9B
≈ Stucco Wall

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

四角配色 +90° +180° +270°

对比度与无障碍

白底

WCAG 1.75:1 · APCA Lc 32

Fail

黑底

WCAG 11.97:1 · APCA Lc 71

AAA

最佳文字颜色: #000000

WCAG 11.97:1 (AAA) · APCA Lc 71

Contrast pairs

代码片段

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);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

取色器配色组合对比度检测 Studio JSON API