最も近い色名 · #DE7AB1
#DE7AB1
最も近い色名: Pink Punk
#DE7AB1（rgb(222 122 177)、hsl(327 60% 67%)、oklch(0.707 0.139 347.1)）に最も近い色名はPink Punkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#DE7AB1
oklch(0.707 0.139 347.1)
カラー変換
- HEX
- #de7ab1
- RGB
- rgb(222 122 177)
- HSL
- hsl(327 60% 67%)
- HWB
- hwb(327 48% 13%)
- OKLCH
- oklch(0.707 0.139 347.1)
- OKLab
- oklab(0.707 0.136 -0.031)
- CIE Lab
- lab(64.05 44.59 -11.24)
- LCH
- lch(64.05 45.98 345.8)
- CMYK
- cmyk(0% 45% 20% 13%)
ティント · シェード · トーン
ティント
- E388B9
- E795C0
- EBA2C8
- EFB0D0
- F2BDD8
- F5CADF
- F8D7E7
- FBE5EF
- FDF2F7
シェード
- C16999
- A55983
- 89496C
- 6F3A57
- 552B42
- 3D1D2F
- 26101C
- 12050C
- 020101
トーン
- D57BAC
- CC7DA7
- C37EA2
- BA7E9D
- B07F98
- A78093
- 9E808F
- 94808A
- 8A8085
カラーハーモニー
補色 +180°
- DE7AB1
Pink Punk
- 1CBB8E
≈ Mountain Meadow
類似色 -30° +30°
- DE7AB1
Pink Punk
- C383D9
≈ Purception
- EA7981
≈ Siesta Rose
トライアド +120° +240°
- DE7AB1
Pink Punk
- ABA628
≈ Venom
- 00B0E2
≈ Blue Atoll
スプリットコンプリメンタリー +150° +210°
- DE7AB1
Pink Punk
- 75B45A
≈ Palm Tree
- 00B7BA
≈ Cyan Sky
テトラード +90° +180° +270°
- DE7AB1
Pink Punk
- D09320
≈ Jackpot
- 1CBB8E
≈ Mountain Meadow
- 65A1F6
≈ Feather Star
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.79:1 · APCA Lc 53
Ag
AAA黒の上
WCAG 7.52:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.52:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--pink-punk: #de7ab1;
--pink-punk-rgb: 222 122 177;
--pink-punk-oklch: oklch(0.707 0.139 347.1);
}
.element {
color: var(--pink-punk);
background-color: hsl(327 60% 67%);
border-color: oklch(0.707 0.139 347.1);
}Tailwind CSS v4
@theme {
--color-pink-punk: #de7ab1;
--color-pink-punk-50: #ffe6fb;
--color-pink-punk-100: #ffd6ef;
--color-pink-punk-200: #ffbcde;
--color-pink-punk-300: #ed9ac3;
--color-pink-punk-400: #d97aae;
--color-pink-punk-500: #c65a98;
--color-pink-punk-600: #a74d80;
--color-pink-punk-700: #863e67;
--color-pink-punk-800: #632c4d;
--color-pink-punk-900: #461e36;
--color-pink-punk-950: #2d0d21;
}SCSS
$pink-punk: #de7ab1;
$pink-punk-rgb: 222, 122, 177;
$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);
}