色名 · #D3B0CE
Lavender Knoll
Lavender Knollは#D3B0CE：rgb(211 176 206)、hsl(309 28% 76%)、oklch(0.797 0.057 330.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Lavender Knoll color name →
#D3B0CE
oklch(0.797 0.057 330.9)
カラー変換
- HEX
- #d3b0ce
- RGB
- rgb(211 176 206)
- HSL
- hsl(309 28% 76%)
- HWB
- hwb(309 69% 17%)
- OKLCH
- oklch(0.797 0.057 330.9)
- OKLab
- oklab(0.797 0.05 -0.028)
- CIE Lab
- lab(75.67 16.87 -10.28)
- LCH
- lch(75.67 19.76 328.7)
- CMYK
- cmyk(0% 17% 2% 17%)
ティント · シェード · トーン
ティント
- D7B8D3
- DCC0D8
- E0C7DD
- E5CFE2
- E9D7E6
- EEDFEB
- F2E7F0
- F6EFF5
- FBF7FA
シェード
- B799B3
- 9C8298
- 826C7F
- 695666
- 51424E
- 3A2E38
- 241C23
- 100B0F
- 020102
トーン
- CAABC6
- C2A6BE
- BAA1B6
- B19DAE
- A998A6
- A1939E
- 988E97
- 90898F
- 888588
カラーハーモニー
補色 +180°
- D3B0CE
Lavender Knoll
- A3C8AA
≈ French Market
類似色 -30° +30°
- D3B0CE
Lavender Knoll
- C3B5DC
≈ Tinted Iris
- DDAEBB
≈ Pentalon
トライアド +120° +240°
- D3B0CE
Lavender Knoll
- CABC93
≈ Morning Tea
- 92C7D2
≈ Idyllic Isle
スプリットコンプリメンタリー +150° +210°
- D3B0CE
Lavender Knoll
- B7C39A
≈ Green Eggs & Cam
- 95C9BF
≈ Beach Breeze
テトラード +90° +180° +270°
- D3B0CE
Lavender Knoll
- D9B598
≈ Beech-Nut
- A3C8AA
≈ French Market
- 9DC2DF
≈ Pale Cerulean
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.93:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.87:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.87:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--lavender-knoll: #d3b0ce;
--lavender-knoll-rgb: 211 176 206;
--lavender-knoll-oklch: oklch(0.797 0.057 330.9);
}
.element {
color: var(--lavender-knoll);
background-color: hsl(309 28% 76%);
border-color: oklch(0.797 0.057 330.9);
}Tailwind CSS v4
@theme {
--color-lavender-knoll: #d3b0ce;
--color-lavender-knoll-50: #ffeffc;
--color-lavender-knoll-100: #f4e1f0;
--color-lavender-knoll-200: #e4ccdf;
--color-lavender-knoll-300: #caadc4;
--color-lavender-knoll-400: #b393ae;
--color-lavender-knoll-500: #9d7998;
--color-lavender-knoll-600: #846680;
--color-lavender-knoll-700: #6a5267;
--color-lavender-knoll-800: #4e3b4c;
--color-lavender-knoll-900: #362935;
--color-lavender-knoll-950: #211720;
}SCSS
$lavender-knoll: #d3b0ce;
$lavender-knoll-rgb: 211, 176, 206;
$lavender-knoll-light: mix(#fff, $lavender-knoll, 20%);
$lavender-knoll-dark: mix(#000, $lavender-knoll, 20%);
.element {
color: $lavender-knoll;
box-shadow: 0 0 0 2px rgba($lavender-knoll, 0.35);
}