이름 색상 · #F5D0D6
Pink Cupcake
Pink Cupcake은(는) #F5D0D6: rgb(245 208 214), hsl(350 65% 89%), oklch(0.891 0.042 7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Pink Cupcake color name →
#F5D0D6
oklch(0.891 0.042 7)
색상 변환
- HEX
- #f5d0d6
- RGB
- rgb(245 208 214)
- HSL
- hsl(350 65% 89%)
- HWB
- hwb(350 82% 4%)
- OKLCH
- oklch(0.891 0.042 7)
- OKLab
- oklab(0.891 0.042 0.005)
- CIE Lab
- lab(86.81 14.09 2.1)
- LCH
- lch(86.81 14.24 8.5)
- CMYK
- cmyk(0% 15% 13% 4%)
틴트 · 셰이드 · 톤
틴트
- F6D5DA
- F7D9DE
- F8DEE2
- F9E3E6
- FAE7EA
- FBECEE
- FCF1F3
- FDF6F7
- FEFAFB
셰이드
- D5B5BA
- B69A9E
- 988084
- 7B676A
- 5F4F52
- 44393B
- 2B2325
- 151010
- 030202
톤
- E9C8CD
- DDC0C4
- D1B7BB
- C5AFB3
- B9A7AA
- AD9FA1
- A29799
- 968F91
- 8B8888
색 조화
보색 +180°
- F5D0D6
Pink Cupcake
- BDE5DF
≈ Soothing Sea
유사색 -30° +30°
- F5D0D6
Pink Cupcake
- EED1E5
≈ Lacquer Mauve
- F5D2C8
≈ Pink Cloud
삼각 배색 +120° +240°
- F5D0D6
Pink Cupcake
- D3E1C3
≈ Security
- C5DEF6
≈ Fly a Kite
분열 보색 +150° +210°
- F5D0D6
Pink Cupcake
- C5E4D0
≈ Mint Smoothie
- BDE2ED
≈ Diminished Blue
사각 배색 +90° +180° +270°
- F5D0D6
Pink Cupcake
- E2DCBC
≈ Flaxen Fair
- BDE5DF
≈ Soothing Sea
- D3D9F7
≈ Flax Bloom
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.41:1 · APCA Lc 20
Ag
AAA검은색 위
WCAG 14.87:1 · APCA Lc 84
가장 좋은 글자색: #000000
WCAG 14.87:1 (AAA) · APCA Lc 84
Contrast pairs
코드 스니펫
CSS
:root {
--pink-cupcake: #f5d0d6;
--pink-cupcake-rgb: 245 208 214;
--pink-cupcake-oklch: oklch(0.891 0.042 7);
}
.element {
color: var(--pink-cupcake);
background-color: hsl(350 65% 89%);
border-color: oklch(0.891 0.042 7);
}Tailwind CSS v4
@theme {
--color-pink-cupcake: #f5d0d6;
--color-pink-cupcake-50: #fff0f2;
--color-pink-cupcake-100: #f5e2e5;
--color-pink-cupcake-200: #e5cdd0;
--color-pink-cupcake-300: #ccafb3;
--color-pink-cupcake-400: #b5959a;
--color-pink-cupcake-500: #a07b81;
--color-pink-cupcake-600: #87686d;
--color-pink-cupcake-700: #6c5357;
--color-pink-cupcake-800: #503c40;
--color-pink-cupcake-900: #372a2c;
--color-pink-cupcake-950: #221719;
}SCSS
$pink-cupcake: #f5d0d6;
$pink-cupcake-rgb: 245, 208, 214;
$pink-cupcake-light: mix(#fff, $pink-cupcake, 20%);
$pink-cupcake-dark: mix(#000, $pink-cupcake, 20%);
.element {
color: $pink-cupcake;
box-shadow: 0 0 0 2px rgba($pink-cupcake, 0.35);
}