最も近い色名 · #CC466C
#CC466C
最も近い色名: Dark Pink
#CC466C（rgb(204 70 108)、hsl(343 57% 54%)、oklch(0.59 0.171 6.8)）に最も近い色名はDark Pinkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#CC466C
oklch(0.59 0.171 6.8)
カラー変換
- HEX
- #cc466c
- RGB
- rgb(204 70 108)
- HSL
- hsl(343 57% 54%)
- HWB
- hwb(343 27% 20%)
- OKLCH
- oklch(0.59 0.171 6.8)
- OKLab
- oklab(0.59 0.17 0.02)
- CIE Lab
- lab(50.38 55.81 8.84)
- LCH
- lch(50.38 56.51 9)
- CMYK
- cmyk(0% 66% 47% 20%)
ティント · シェード · トーン
ティント
- D45B7A
- DB6F88
- E18196
- E793A4
- ECA5B3
- F1B7C2
- F6C9D1
- F9DBE0
- FDEDEF
シェード
- B13C5D
- 97324E
- 7E2840
- 651E32
- 4E1525
- 370D19
- 22050D
- 0F0204
- 020000
トーン
- C64F6E
- BF5670
- B85D72
- B26374
- AA6976
- A36E78
- 9B737A
- 92777C
- 8A7C7E
カラーハーモニー
補色 +180°
- CC466C
Dark Pink
- 009187
≈ Nifty Turquoise
類似色 -30° +30°
- CC466C
Dark Pink
- B94DA2
≈ Safflower Purple
- CE4D27
≈ Peanut Butter Jelly
トライアド +120° +240°
- CC466C
Dark Pink
- 658C00
≈ Sap Green
- 0082D3
≈ Electron Blue
スプリットコンプリメンタリー +150° +210°
- CC466C
Dark Pink
- 009559
≈ Green Gloss
- 008CA6
≈ Quintana
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.50:1 · APCA Lc 70
Ag
AA黒の上
WCAG 4.66:1 · APCA Lc 31
最適な文字色: #000000
WCAG 4.66:1 (AA) · APCA Lc 31
Contrast pairs
コードスニペット
CSS
:root {
--dark-pink: #cc466c;
--dark-pink-rgb: 204 70 108;
--dark-pink-oklch: oklch(0.59 0.171 6.8);
}
.element {
color: var(--dark-pink);
background-color: hsl(343 57% 54%);
border-color: oklch(0.59 0.171 6.8);
}Tailwind CSS v4
@theme {
--color-dark-pink: #cc466c;
--color-dark-pink-50: #ffe2eb;
--color-dark-pink-100: #ffd1dc;
--color-dark-pink-200: #ffb5c5;
--color-dark-pink-300: #ff90a5;
--color-dark-pink-400: #ef6d8d;
--color-dark-pink-500: #dd4773;
--color-dark-pink-600: #bb3d62;
--color-dark-pink-700: #96314e;
--color-dark-pink-800: #70223b;
--color-dark-pink-900: #4f1728;
--color-dark-pink-950: #340716;
}SCSS
$dark-pink: #cc466c;
$dark-pink-rgb: 204, 70, 108;
$dark-pink-light: mix(#fff, $dark-pink, 20%);
$dark-pink-dark: mix(#000, $dark-pink, 20%);
.element {
color: $dark-pink;
box-shadow: 0 0 0 2px rgba($dark-pink, 0.35);
}