πŸŽ¨μƒ‰μƒ 밝기·채도 단계 생성기

베이슀 μƒ‰μƒμœΌλ‘œ TintΒ·Shade 10단계 νŒ”λ ˆνŠΈ μžλ™ 생성

색상 밝기·채도 단계 생성기 μ‚¬μš©λ²•

베이슀 색상(HEX)을 μ„ νƒν•˜κ±°λ‚˜ 직접 μž…λ ₯ν•˜λ©΄ Tint 5단계와 Shade 5단계, 총 10가지 νŒ”λ ˆνŠΈκ°€ μžλ™μœΌλ‘œ μƒμ„±λ©λ‹ˆλ‹€. TintλŠ” μ›λž˜ 색에 흰색을 ν˜Όν•©ν•΄ 밝게 λ§Œλ“  색이고, ShadeλŠ” 검정을 ν˜Όν•©ν•΄ μ–΄λ‘‘κ²Œ λ§Œλ“  μƒ‰μž…λ‹ˆλ‹€. T20은 흰색 20%, T100은 흰색 100% ν˜Όν•©μ„ μ˜λ―Έν•©λ‹ˆλ‹€.

각 μŠ€μ›ŒμΉ˜λ₯Ό ν΄λ¦­ν•˜λ©΄ HEX μ½”λ“œκ°€ ν΄λ¦½λ³΄λ“œμ— μ¦‰μ‹œ λ³΅μ‚¬λ©λ‹ˆλ‹€. Tailwind CSS, Material Design, Figma λ“± 색상 μŠ€μΌ€μΌμ΄ ν•„μš”ν•œ λͺ¨λ“  μž‘μ—…μ— ν™œμš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λΈŒλžœλ“œ 컬러λ₯Ό μž…λ ₯ν•΄ 전체 색상 νŒ”λ ˆνŠΈλ₯Ό μ™„μ„±ν•΄ λ³΄μ„Έμš”.

CSS λ³€μˆ˜λ‘œ ν™œμš©ν•  λ•ŒλŠ” T20Β·T40Β·T60을 밝은 λ°°κ²½(hover, disabled), Baseλ₯Ό μ£Όμš” 색상, S20Β·S40을 μ–΄λ‘μš΄ hover μƒνƒœμ— λ§€ν•‘ν•˜λ©΄ μΌκ΄€λœ 색상 체계λ₯Ό μ‰½κ²Œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문

Tint와 Shade의 μ°¨μ΄λŠ” λ¬΄μ—‡μΈκ°€μš”?

TintλŠ” μ›λž˜ 색상에 흰색을 ν˜Όν•©ν•΄ 밝게 λ§Œλ“  색, ShadeλŠ” 검정을 ν˜Όν•©ν•΄ μ–΄λ‘‘κ²Œ λ§Œλ“  μƒ‰μž…λ‹ˆλ‹€. T20은 흰색 20% ν˜Όν•©, S40은 κ²€μ • 40% ν˜Όν•©μ„ μ˜λ―Έν•©λ‹ˆλ‹€.

νŒ”λ ˆνŠΈλ₯Ό 어디에 ν™œμš©ν•˜λ‚˜μš”?

UI λ²„νŠΌΒ·λ°°κ²½Β·ν…μŠ€νŠΈ 색상 체계 ꡬ성, CSS λ³€μˆ˜ μ •μ˜, Tailwind μ»€μŠ€ν…€ 색상, Figma μŠ€νƒ€μΌ μ„€μ • 등에 ν™œμš©ν•©λ‹ˆλ‹€. λΈŒλžœλ“œ 컬러 1개둜 전체 λ””μžμΈ μ‹œμŠ€ν…œμ„ ꡬ좕할 수 μžˆμŠ΅λ‹ˆλ‹€.

HEX 말고 RGBλ‚˜ HSLλ‘œλ„ μž…λ ₯ν•  수 μžˆλ‚˜μš”?

ν˜„μž¬ HEX(#RRGGBB) ν˜•μ‹λ§Œ μ§€μ›ν•©λ‹ˆλ‹€. RGBΒ·HSL 값은 온라인 색상 λ³€ν™˜ λ„κ΅¬λ‘œ HEX둜 λ³€ν™˜ ν›„ μž…λ ₯ν•΄ μ£Όμ„Έμš”.