最も近い色名 · #D97BBA
#D97BBA
最も近い色名: Pink Punk
#D97BBA（rgb(217 123 186)、hsl(320 55% 67%)、oklch(0.705 0.139 340.8)）に最も近い色名はPink Punkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#D97BBA
oklch(0.705 0.139 340.8)
カラー変換
- HEX
- #d97bba
- RGB
- rgb(217 123 186)
- HSL
- hsl(320 55% 67%)
- HWB
- hwb(320 48% 15%)
- OKLCH
- oklch(0.705 0.139 340.8)
- OKLab
- oklab(0.705 0.132 -0.046)
- CIE Lab
- lab(63.85 43.4 -16.72)
- LCH
- lch(63.85 46.51 338.9)
- CMYK
- cmyk(0% 43% 14% 15%)
ティント · シェード · トーン
ティント
- DE89C1
- E396C8
- E7A3CF
- EBB0D6
- EFBDDC
- F3CAE3
- F6D8EA
- F9E5F1
- FCF2F8
シェード
- BC6AA1
- A15A89
- 864A72
- 6C3A5C
- 532C46
- 3B1E32
- 25101E
- 11050D
- 020102
トーン
- D07CB4
- C87DAE
- BF7EA8
- B67FA3
- AE7F9D
- A58097
- 9C8091
- 93808B
- 898086
カラーハーモニー
補色 +180°
- D97BBA
Pink Punk
- 37BA83
≈ Aztec Jade
類似色 -30° +30°
- D97BBA
Pink Punk
- BB85E0
≈ Lavender Blossom
- E8788B
≈ Zany Pink
トライアド +120° +240°
- D97BBA
Pink Punk
- B4A11E
≈ Wet Leaf
- 00B1D8
≈ Blue Atoll
スプリットコンプリメンタリー +150° +210°
- D97BBA
Pink Punk
- 81B14E
≈ Savoy
- 00B8B2
≈ Jade Gravel
テトラード +90° +180° +270°
- D97BBA
Pink Punk
- D68F28
≈ Turmeric Tea
- 37BA83
≈ Aztec Jade
- 57A4F3
≈ Feather Star
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.80:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.49:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--pink-punk: #d97bba;
--pink-punk-rgb: 217 123 186;
--pink-punk-oklch: oklch(0.705 0.139 340.8);
}
.element {
color: var(--pink-punk);
background-color: hsl(320 55% 67%);
border-color: oklch(0.705 0.139 340.8);
}Tailwind CSS v4
@theme {
--color-pink-punk: #d97bba;
--color-pink-punk-50: #ffe6ff;
--color-pink-punk-100: #ffd6f4;
--color-pink-punk-200: #ffbde4;
--color-pink-punk-300: #e99aca;
--color-pink-punk-400: #d57cb7;
--color-pink-punk-500: #c15ca2;
--color-pink-punk-600: #a34f89;
--color-pink-punk-700: #833f6d;
--color-pink-punk-800: #602d52;
--color-pink-punk-900: #441e39;
--color-pink-punk-950: #2b0e24;
}SCSS
$pink-punk: #d97bba;
$pink-punk-rgb: 217, 123, 186;
$pink-punk-light: mix(#fff, $pink-punk, 20%);
$pink-punk-dark: mix(#000, $pink-punk, 20%);
.element {
color: $pink-punk;
box-shadow: 0 0 0 2px rgba($pink-punk, 0.35);
}