最も近い色名 · #DF1A8A
#DF1A8A
最も近い色名: Benevolent Pink
#DF1A8A（rgb(223 26 138)、hsl(326 79% 49%)、oklch(0.599 0.236 353.7)）に最も近い色名はBenevolent Pinkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#DF1A8A
oklch(0.599 0.236 353.7)
カラー変換
- HEX
- #df1a8a
- RGB
- rgb(223 26 138)
- HSL
- hsl(326 79% 49%)
- HWB
- hwb(326 10% 13%)
- OKLCH
- oklch(0.599 0.236 353.7)
- OKLab
- oklab(0.599 0.234 -0.026)
- CIE Lab
- lab(50.33 74.81 -8.81)
- LCH
- lch(50.33 75.33 353.3)
- CMYK
- cmyk(0% 88% 38% 13%)
ティント · シェード · トーン
ティント
- E64295
- EB5CA0
- F173AC
- F589B7
- F99DC3
- FCB1CF
- FEC5DB
- FFD8E7
- FFECF3
シェード
- C21577
- A51065
- 8A0C53
- 6F0742
- 560432
- 3D0222
- 270114
- 120007
- 020001
トーン
- D73289
- CF4288
- C74E87
- BE5786
- B56085
- AC6884
- A26E83
- 977582
- 8C7B81
カラーハーモニー
補色 +180°
- DF1A8A
Benevolent Pink
- 00957A
≈ Pool Table
類似色 -30° +30°
- DF1A8A
Benevolent Pink
- BF38CD
≈ Ultraviolet Berl
- EC1331
≈ Transfusion
トライアド +120° +240°
- DF1A8A
Benevolent Pink
- 808800
≈ Krypton Green
- 008BBE
≈ Hawaiian Surf
スプリットコンプリメンタリー +150° +210°
- DF1A8A
Benevolent Pink
- 009B1B
≈ Green Gardens
- 00919B
≈ Peacock Feather
テトラード +90° +180° +270°
- DF1A8A
Benevolent Pink
- A27800
≈ Nataneyu Gold
- 00957A
≈ Pool Table
- 3873FF
≈ Hailey Blue
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.51:1 · APCA Lc 69
Ag
AA黒の上
WCAG 4.65:1 · APCA Lc 32
最適な文字色: #000000
WCAG 4.65:1 (AA) · APCA Lc 32
Contrast pairs
コードスニペット
CSS
:root {
--benevolent-pink: #df1a8a;
--benevolent-pink-rgb: 223 26 138;
--benevolent-pink-oklch: oklch(0.599 0.236 353.7);
}
.element {
color: var(--benevolent-pink);
background-color: hsl(326 79% 49%);
border-color: oklch(0.599 0.236 353.7);
}Tailwind CSS v4
@theme {
--color-benevolent-pink: #df1a8a;
--color-benevolent-pink-50: #ffd9f8;
--color-benevolent-pink-100: #ffc7eb;
--color-benevolent-pink-200: #ffa8d8;
--color-benevolent-pink-300: #ff7dbc;
--color-benevolent-pink-400: #ff51a9;
--color-benevolent-pink-500: #ef0091;
--color-benevolent-pink-600: #ca077b;
--color-benevolent-pink-700: #a20a62;
--color-benevolent-pink-800: #78054b;
--color-benevolent-pink-900: #550534;
--color-benevolent-pink-950: #390020;
}SCSS
$benevolent-pink: #df1a8a;
$benevolent-pink-rgb: 223, 26, 138;
$benevolent-pink-light: mix(#fff, $benevolent-pink, 20%);
$benevolent-pink-dark: mix(#000, $benevolent-pink, 20%);
.element {
color: $benevolent-pink;
box-shadow: 0 0 0 2px rgba($benevolent-pink, 0.35);
}