命名颜色 · #F0A0D1

Violet Kiss

Violet Kiss 即 #F0A0D1：rgb(240 160 209)、hsl(323 73% 78%)、oklch(0.799 0.113 342.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Pink mean? → · Violet Kiss color name →

#F0A0D1

oklch(0.799 0.113 342.6)

颜色转换

HEX: #f0a0d1
RGB: rgb(240 160 209)
HSL: hsl(323 73% 78%)
HWB: hwb(323 63% 6%)
OKLCH: oklch(0.799 0.113 342.6)
OKLab: oklab(0.799 0.108 -0.034)
CIE Lab: lab(75.11 35.7 -12.34)
LCH: lch(75.11 37.77 340.9)
CMYK: cmyk(0% 33% 13% 6%)

浅色调 · 深色调 · 灰色调

浅色调

F2AAD6
F4B3DA
F6BDDF
F8C6E3
FAD0E8
FBD9ED
FCE3F1
FDECF6
FEF6FA

深色调

D18BB5
B2769B
956181
784E68
5D3B50
432939
2A1923
140910
030102

灰色调

E59DC9
D99AC0
CE97B8
C394B0
B891A8
AD8EA0
A28A98
968790
8B8388

配色和谐

互补色 +180°

F0A0D1
Violet Kiss
73D4A8
≈ Crystal Gem

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.97:1 · APCA Lc 38

Fail

黑底

WCAG 10.65:1 · APCA Lc 65

AAA

最佳文字颜色: #000000

WCAG 10.65:1 (AAA) · APCA Lc 65

Contrast pairs

代码片段

CSS

:root {
  --violet-kiss: #f0a0d1;
  --violet-kiss-rgb: 240 160 209;
  --violet-kiss-oklch: oklch(0.799 0.113 342.6);
}

.element {
  color: var(--violet-kiss);
  background-color: hsl(323 73% 78%);
  border-color: oklch(0.799 0.113 342.6);
}

Tailwind CSS v4

@theme {
  --color-violet-kiss: #f0a0d1;
  --color-violet-kiss-50: #ffe9fd;
  --color-violet-kiss-100: #ffdaf1;
  --color-violet-kiss-200: #f8c2e0;
  --color-violet-kiss-300: #e1a0c5;
  --color-violet-kiss-400: #cd83b0;
  --color-violet-kiss-500: #b8669a;
  --color-violet-kiss-600: #9c5782;
  --color-violet-kiss-700: #7d4568;
  --color-violet-kiss-800: #5c324e;
  --color-violet-kiss-900: #402236;
  --color-violet-kiss-950: #291121;
}

SCSS

$violet-kiss: #f0a0d1;
$violet-kiss-rgb: 240, 160, 209;
$violet-kiss-light: mix(#fff, $violet-kiss, 20%);
$violet-kiss-dark: mix(#000, $violet-kiss, 20%);

.element {
  color: $violet-kiss;
  box-shadow: 0 0 0 2px rgba($violet-kiss, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

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