이름 색상 · #F4B0BB
Silly Puddy
Silly Puddy은(는) #F4B0BB: rgb(244 176 187), hsl(350 76% 82%), oklch(0.824 0.081 8.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Silly Puddy color name →
#F4B0BB
oklch(0.824 0.081 8.3)
색상 변환
- HEX
- #f4b0bb
- RGB
- rgb(244 176 187)
- HSL
- hsl(350 76% 82%)
- HWB
- hwb(350 69% 4%)
- OKLCH
- oklch(0.824 0.081 8.3)
- OKLab
- oklab(0.824 0.08 0.012)
- CIE Lab
- lab(78.62 26.67 4.77)
- LCH
- lch(78.62 27.1 10.1)
- CMYK
- cmyk(0% 28% 23% 4%)
틴트 · 셰이드 · 톤
틴트
- F6B8C2
- F7C0C8
- F9C8CF
- FAD0D6
- FBD7DD
- FCDFE3
- FDE7EA
- FEEFF1
- FFF7F8
셰이드
- D499A2
- B5828A
- 976C73
- 7A565C
- 5E4246
- 442E32
- 2B1C1F
- 140B0D
- 030102
톤
- E8ABB5
- DCA6AF
- D1A2A9
- C59DA3
- B9989D
- AE9397
- A28F91
- 978A8B
- 8B8586
색 조화
보색 +180°
- F4B0BB
Silly Puddy
- 85D7CF
≈ Island Sea
유사색 -30° +30°
- F4B0BB
Silly Puddy
- E9B2D7
≈ Pink Gems
- F4B4A0
≈ First Date
삼각 배색 +120° +240°
- F4B0BB
Silly Puddy
- B6D098
≈ Fava Bean
- 9CCAF8
≈ Apocyan
분열 보색 +150° +210°
- F4B0BB
Silly Puddy
- 99D6B2
≈ Vista Blue
- 87D2E8
≈ July
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.78:1 · APCA Lc 33
Ag
AAA검은색 위
WCAG 11.77:1 · APCA Lc 70
가장 좋은 글자색: #000000
WCAG 11.77:1 (AAA) · APCA Lc 70
Contrast pairs
코드 스니펫
CSS
:root {
--silly-puddy: #f4b0bb;
--silly-puddy-rgb: 244 176 187;
--silly-puddy-oklch: oklch(0.824 0.081 8.3);
}
.element {
color: var(--silly-puddy);
background-color: hsl(350 76% 82%);
border-color: oklch(0.824 0.081 8.3);
}Tailwind CSS v4
@theme {
--color-silly-puddy: #f4b0bb;
--color-silly-puddy-50: #ffecf0;
--color-silly-puddy-100: #ffdde1;
--color-silly-puddy-200: #f4c7cc;
--color-silly-puddy-300: #dda7ae;
--color-silly-puddy-400: #c98b95;
--color-silly-puddy-500: #b46f7c;
--color-silly-puddy-600: #985e69;
--color-silly-puddy-700: #7a4b54;
--color-silly-puddy-800: #5a363e;
--color-silly-puddy-900: #3f252b;
--color-silly-puddy-950: #281418;
}SCSS
$silly-puddy: #f4b0bb;
$silly-puddy-rgb: 244, 176, 187;
$silly-puddy-light: mix(#fff, $silly-puddy, 20%);
$silly-puddy-dark: mix(#000, $silly-puddy, 20%);
.element {
color: $silly-puddy;
box-shadow: 0 0 0 2px rgba($silly-puddy, 0.35);
}