最も近い色名 · #BF8E97
#BF8E97
最も近い色名: Punched Pink
#BF8E97（rgb(191 142 151)、hsl(349 28% 65%)、oklch(0.696 0.061 6.5)）に最も近い色名はPunched Pinkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#BF8E97
oklch(0.696 0.061 6.5)
カラー変換
- HEX
- #bf8e97
- RGB
- rgb(191 142 151)
- HSL
- hsl(349 28% 65%)
- HWB
- hwb(349 56% 25%)
- OKLCH
- oklch(0.696 0.061 6.5)
- OKLab
- oklab(0.696 0.06 0.007)
- CIE Lab
- lab(64.05 20.14 2.88)
- LCH
- lch(64.05 20.34 8.1)
- CMYK
- cmyk(0% 26% 21% 25%)
ティント · シェード · トーン
ティント
- C699A1
- CCA4AB
- D3AFB5
- D9BABF
- E0C5CA
- E6D1D4
- ECDCDF
- F3E8E9
- F9F3F4
シェード
- A67B83
- 8D686F
- 75565C
- 5E4449
- 483437
- 332426
- 1F1517
- 0D0708
- 020101
トーン
- B98D95
- B38B92
- AC8A90
- A6898E
- A0878B
- 9A8689
- 938487
- 8D8385
- 868282
カラーハーモニー
補色 +180°
- BF8E97
Punched Pink
- 71AAA3
≈ Steel Pan Mallet
類似色 -30° +30°
- BF8E97
Punched Pink
- B68FAB
≈ Fabulous Fantasy
- BF9183
≈ Revival Rose
トライアド +120° +240°
- BF8E97
Punched Pink
- 93A57C
≈ Huntington Garden
- 7FA1C1
≈ Far Horizons
スプリットコンプリメンタリー +150° +210°
- BF8E97
Punched Pink
- 7FA98E
≈ Catnip
- 71A7B6
≈ Blue Chiffon
テトラード +90° +180° +270°
- BF8E97
Punched Pink
- A89E72
≈ Fresh Olive
- 71AAA3
≈ Steel Pan Mallet
- 939AC3
≈ Grape Ivy
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.78:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.53:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.53:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--punched-pink: #bf8e97;
--punched-pink-rgb: 191 142 151;
--punched-pink-oklch: oklch(0.696 0.061 6.5);
}
.element {
color: var(--punched-pink);
background-color: hsl(349 28% 65%);
border-color: oklch(0.696 0.061 6.5);
}Tailwind CSS v4
@theme {
--color-punched-pink: #bf8e97;
--color-punched-pink-50: #ffeef2;
--color-punched-pink-100: #fbe0e4;
--color-punched-pink-200: #edcacf;
--color-punched-pink-300: #d4abb1;
--color-punched-pink-400: #bf9098;
--color-punched-pink-500: #aa757f;
--color-punched-pink-600: #8f646c;
--color-punched-pink-700: #735056;
--color-punched-pink-800: #553a40;
--color-punched-pink-900: #3b272c;
--color-punched-pink-950: #251619;
}SCSS
$punched-pink: #bf8e97;
$punched-pink-rgb: 191, 142, 151;
$punched-pink-light: mix(#fff, $punched-pink, 20%);
$punched-pink-dark: mix(#000, $punched-pink, 20%);
.element {
color: $punched-pink;
box-shadow: 0 0 0 2px rgba($punched-pink, 0.35);
}