色名 · #CC99AA
Honey Pink
Honey Pinkは#CC99AA：rgb(204 153 170)、hsl(340 33% 70%)、oklch(0.736 0.065 357)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Honey Pink color name →
#CC99AA
oklch(0.736 0.065 357)
カラー変換
- HEX
- #cc99aa
- RGB
- rgb(204 153 170)
- HSL
- hsl(340 33% 70%)
- HWB
- hwb(340 60% 20%)
- OKLCH
- oklch(0.736 0.065 357)
- OKLab
- oklab(0.736 0.065 -0.003)
- CIE Lab
- lab(68.54 21.56 -1.06)
- LCH
- lch(68.54 21.59 357.2)
- CMYK
- cmyk(0% 25% 17% 20%)
ティント · シェード · トーン
ティント
- D1A3B2
- D7ADBA
- DCB7C3
- E1C1CB
- E6CBD4
- EBD5DC
- F0E0E5
- F5EAED
- FAF5F6
シェード
- B18493
- 97707D
- 7E5D68
- 654A53
- 4E383F
- 37272D
- 22171B
- 0F080B
- 020101
トーン
- C497A6
- BD94A1
- B5929D
- AE8F99
- A68D95
- 9E8A91
- 97888C
- 8F8588
- 888384
カラーハーモニー
補色 +180°
- CC99AA
Honey Pink
- 7DB7A9
≈ Mint Bonbon Green
類似色 -30° +30°
- CC99AA
Honey Pink
- C09CBF
≈ Lupine
- CF9A94
≈ Dull Apricot
トライアド +120° +240°
- CC99AA
Honey Pink
- A6AF81
≈ Fresh Guacamole
- 83B0CE
≈ Windy Day
スプリットコンプリメンタリー +150° +210°
- CC99AA
Honey Pink
- 8FB592
≈ Mountain Fern
- 78B6BE
≈ Aqua Blue
テトラード +90° +180° +270°
- CC99AA
Honey Pink
- BBA77B
≈ Texas Sage
- 7DB7A9
≈ Mint Bonbon Green
- 97A9D3
≈ Foresight
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.41:1 · APCA Lc 47
Ag
AAA黒の上
WCAG 8.70:1 · APCA Lc 55
最適な文字色: #000000
WCAG 8.70:1 (AAA) · APCA Lc 55
Contrast pairs
コードスニペット
CSS
:root {
--honey-pink: #cc99aa;
--honey-pink-rgb: 204 153 170;
--honey-pink-oklch: oklch(0.736 0.065 357);
}
.element {
color: var(--honey-pink);
background-color: hsl(340 33% 70%);
border-color: oklch(0.736 0.065 357);
}Tailwind CSS v4
@theme {
--color-honey-pink: #cc99aa;
--color-honey-pink-50: #ffeef5;
--color-honey-pink-100: #fbdfe7;
--color-honey-pink-200: #edc9d3;
--color-honey-pink-300: #d4aab6;
--color-honey-pink-400: #bf8f9f;
--color-honey-pink-500: #aa7487;
--color-honey-pink-600: #8f6372;
--color-honey-pink-700: #734f5b;
--color-honey-pink-800: #553943;
--color-honey-pink-900: #3b272f;
--color-honey-pink-950: #25151b;
}SCSS
$honey-pink: #cc99aa;
$honey-pink-rgb: 204, 153, 170;
$honey-pink-light: mix(#fff, $honey-pink, 20%);
$honey-pink-dark: mix(#000, $honey-pink, 20%);
.element {
color: $honey-pink;
box-shadow: 0 0 0 2px rgba($honey-pink, 0.35);
}