最も近い色名 · #CE436D
#CE436D
最も近い色名: Dark Pink
#CE436D（rgb(206 67 109)、hsl(342 59% 54%)、oklch(0.59 0.177 6)）に最も近い色名はDark Pinkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#CE436D
oklch(0.59 0.177 6)
カラー変換
- HEX
- #ce436d
- RGB
- rgb(206 67 109)
- HSL
- hsl(342 59% 54%)
- HWB
- hwb(342 26% 19%)
- OKLCH
- oklch(0.59 0.177 6)
- OKLab
- oklab(0.59 0.176 0.019)
- CIE Lab
- lab(50.31 57.65 8.22)
- LCH
- lch(50.31 58.24 8.1)
- CMYK
- cmyk(0% 67% 47% 19%)
ティント · シェード · トーン
ティント
- D5597B
- DC6D88
- E38096
- E992A5
- EEA5B3
- F3B7C2
- F7C9D1
- FADBE0
- FDEDEF
シェード
- B3395E
- 982F4F
- 7F2641
- 661D33
- 4E1426
- 380C19
- 23050D
- 0F0104
- 020001
トーン
- C84C6F
- C15471
- BA5B73
- B36275
- AB6877
- A46D78
- 9C727A
- 93777C
- 8A7C7E
カラーハーモニー
補色 +180°
- CE436D
Dark Pink
- 009186
≈ Emerald Coast
類似色 -30° +30°
- CE436D
Dark Pink
- BA4BA4
≈ Ultraviolet Nusp
- D14A24
≈ Peanut Butter Jelly
トライアド +120° +240°
- CE436D
Dark Pink
- 678C00
≈ Sap Green
- 0083D1
≈ Electron Blue
スプリットコンプリメンタリー +150° +210°
- CE436D
Dark Pink
- 009558
≈ Green Gloss
- 008CA5
≈ Quintana
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.51:1 · APCA Lc 70
Ag
AA黒の上
WCAG 4.64:1 · APCA Lc 31
最適な文字色: #000000
WCAG 4.64:1 (AA) · APCA Lc 31
Contrast pairs
コードスニペット
CSS
:root {
--dark-pink: #ce436d;
--dark-pink-rgb: 206 67 109;
--dark-pink-oklch: oklch(0.59 0.177 6);
}
.element {
color: var(--dark-pink);
background-color: hsl(342 59% 54%);
border-color: oklch(0.59 0.177 6);
}Tailwind CSS v4
@theme {
--color-dark-pink: #ce436d;
--color-dark-pink-50: #ffe1eb;
--color-dark-pink-100: #ffd0dd;
--color-dark-pink-200: #ffb4c6;
--color-dark-pink-300: #ff8fa6;
--color-dark-pink-400: #f16b8e;
--color-dark-pink-500: #df4374;
--color-dark-pink-600: #bd3a62;
--color-dark-pink-700: #982f4f;
--color-dark-pink-800: #71203b;
--color-dark-pink-900: #501629;
--color-dark-pink-950: #350616;
}SCSS
$dark-pink: #ce436d;
$dark-pink-rgb: 206, 67, 109;
$dark-pink-light: mix(#fff, $dark-pink, 20%);
$dark-pink-dark: mix(#000, $dark-pink, 20%);
.element {
color: $dark-pink;
box-shadow: 0 0 0 2px rgba($dark-pink, 0.35);
}