๐ŸŽจ

์ƒ‰์ƒ ๋ณ€ํ™˜๊ธฐ & ํŒ”๋ ˆํŠธ ์ถ”์ถœ๊ธฐ Color Studio

HEX ยท RGB ยท HSL ยท HSV ยท CMYK ์‹ค์‹œ๊ฐ„ ์ƒํ˜ธ ๋ณ€ํ™˜, WCAG 2.1 ๋ช…๋„ ๋Œ€๋น„ ์ ‘๊ทผ์„ฑ ๊ฒ€์‚ฌ & ์ด๋ฏธ์ง€ ํŒ”๋ ˆํŠธ ์ถ”์ถœ

๋„๊ตฌ ํ—ˆ๋ธŒ
๐ŸŽ›๏ธ๋น„์ฃผ์–ผ ์ปฌ๋Ÿฌ ํ”ผ์ปค & ์Šฌ๋ผ์ด๋”
#10B981
16
185
129
100%
160ยฐ
84%
39%
์ธ๊ธฐ ํ”„๋ฆฌ์…‹ ์ƒ‰์ƒ
๐Ÿ“‹์‹ค์‹œ๊ฐ„ ํฌ๋งท๋ณ„ ์ƒ‰์ƒ ์ฝ”๋“œ
์›ํด๋ฆญ ๋ณต์‚ฌ
HEX6์ž๋ฆฌ 16์ง„์ˆ˜
HEXA (8์ž๋ฆฌ)ํˆฌ๋ช…๋„(Alpha) ํฌํ•จ
RGBCSS ํ‘œ์ค€ ํ‘œ๊ธฐ
RGBA์•ŒํŒŒ ์ฑ„๋„ ํฌํ•จ
HSL์ƒ‰์ƒ, ์ฑ„๋„, ๋ช…๋„
HSLA์•ŒํŒŒ ์ฑ„๋„ ํฌํ•จ HSL
HSV / HSB๊ทธ๋ž˜ํ”ฝ ํˆด ํ‘œ์ค€
CMYK์ธ์‡„ ๋ฐ ์ถœํŒ ํฌ๋งท
CSS ๋ณ€์ˆ˜๋ฃจํŠธ ์ •์˜์šฉ ๋ณ€์ˆ˜
Tailwind CSS์ž„์˜ ๊ฐ’ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค
โš–๏ธWCAG 2.1 ๋ช…๋„ ๋Œ€๋น„(Contrast Ratio) ์ •๋ฐ€ ๊ฒ€์‚ฌ๊ธฐ
ํ…์ŠคํŠธ ์ „๊ฒฝ์ƒ‰ (Text Color)
4.58 : 1๋Œ€๋น„์œจ (Contrast Ratio)
๋ฐฐ๊ฒฝ์ƒ‰ (Background Color)
AA ๊ธฐ์ค€PASS
์ผ๋ฐ˜ ํ…์ŠคํŠธ (Normal)
์ตœ์†Œ 4.5:1 ์ด์ƒ ์š”๊ตฌ
AA ๊ธฐ์ค€PASS
ํฐ ํ…์ŠคํŠธ (Large Text)
์ตœ์†Œ 3.0:1 (18pt+ / Bold 14pt+)
AAA ๊ธฐ์ค€FAIL
์ผ๋ฐ˜ ํ…์ŠคํŠธ (Normal)
์ตœ์†Œ 7.0:1 ์ด์ƒ ์š”๊ตฌ
AAA ๊ธฐ์ค€PASS
ํฐ ํ…์ŠคํŠธ (Large Text)
์ตœ์†Œ 4.5:1 ์ด์ƒ ์š”๊ตฌ
์‹ค์‹œ๊ฐ„ ๋ Œ๋”๋ง ๋ฏธ๋ฆฌ๋ณด๊ธฐ (Live Preview)

LuckyTech Studio ์›น ์ ‘๊ทผ์„ฑ ๋ช…๋„ ๋Œ€๋น„ ํ…Œ์ŠคํŠธ

์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ(WCAG)์€ ์ €์‹œ๋ ฅ์ž๋‚˜ ์ƒ‰๊ฐ ์ด์ƒ์ž๊ฐ€ ํ™”๋ฉด์˜ ๊ธ€์”จ๋ฅผ ๋ช…ํ™•ํžˆ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ์ถฉ๋ถ„ํ•œ ๋ช…๋„ ๋Œ€๋น„๋ฅผ ์ค€์ˆ˜ํ•˜๋„๋ก ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

๐ŸชœTailwind CSS 50 ~ 950 ์ƒ‰์กฐ ์Šค์ผ€์ผ (Tints & Shades)
๐ŸŽจ์ƒ‰์ƒ ์กฐํ™” ๊ทœ์น™ (Color Harmonies)
๋ณด์ƒ‰ (Complementary / 180ยฐ)
์œ ์‚ฌ์ƒ‰ (Analogous / ยฑ30ยฐ)
3๋ณด์ƒ‰ (Triadic / 120ยฐ)
4๋ณด์ƒ‰ (Tetradic / Square)
๐Ÿ–ผ๏ธ์ด๋ฏธ์ง€ ์ฃผ์š” ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ž๋™ ์ถ”์ถœ๊ธฐ
๐Ÿ“ท์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ์ด๊ณณ์— ๋Œ์–ด๋‹ค ๋†“๊ฑฐ๋‚˜ ํด๋ฆญํ•˜์—ฌ ์—…๋กœ๋“œPNG, JPG, WebP, SVG ์ด๋ฏธ์ง€ ์ง€์› (๋ธŒ๋ผ์šฐ์ € ๋กœ์ปฌ ์•ˆ์ „ ๋ถ„์„)
์—…๋กœ๋“œ ์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
๐Ÿ’ฌ

์˜๊ฒฌ ๋ฐ ์งˆ๋ฌธ

0
0 / 1500