스케일 생성기

모든 색상을 11단계 디자인 시스템 스케일로 변환 (50→950): 인지적으로 균일한 OKLCH 보간, 소스 색상이 가장 가까운 단계에 고정, 모든 단계에서 흰색/검은색과의 WCAG 대비, Tailwind / CSS 변수 / SCSS / JSON으로 한 번 클릭 내보내기.

#--11 단계

#fff5ff

50프로필 →

흰색과 대비 1.06
검은색과 대비 19.76

#ffe0ff

100프로필 →

흰색과 대비 1.21
검은색과 대비 17.36

#ffc2fd

200프로필 →

흰색과 대비 1.46
검은색과 대비 14.39

#ffa0f9

300프로필 →

흰색과 대비 1.80
검은색과 대비 11.65

#ff75f2

400프로필 →

흰색과 대비 2.31
검은색과 대비 9.08

소스 단계#f335e5

500프로필 →

흰색과 대비 3.26
검은색과 대비 6.45

#e300d6

600프로필 →

흰색과 대비 4.01
검은색과 대비 5.24

#cb00c0

700프로필 →

흰색과 대비 4.88
검은색과 대비 4.30

#ae00a5

800프로필 →

흰색과 대비 6.28
검은색과 대비 3.34

#8d0087

900프로필 →

흰색과 대비 8.46
검은색과 대비 2.48

#660062

950프로필 →

흰색과 대비 12.06
검은색과 대비 1.74

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff5ff",
        100: "#ffe0ff",
        200: "#ffc2fd",
        300: "#ffa0f9",
        400: "#ff75f2",
        500: "#f335e5",
        600: "#e300d6",
        700: "#cb00c0",
        800: "#ae00a5",
        900: "#8d0087",
        950: "#660062",
        },
      },
    },
  },
};

음영 생성기 작동 방식 - 입력, 확인, 내보내기.

OKLCH에서 지각적으로 균일한 한 색상에서 11단계 디자인 시스템 스케일을 가져옵니다.

01
입력
HEX를 붙여넣거나 모든 색상 페이지에서 "스케일 만들기"를 눌러 값을 가져옵니다.
02
확인
색상이 가장 가까운 단계에 맞춰지며, 모든 단계 아래에 흰색 및 검은색과의 WCAG 대비가 표시됩니다.
03
내보내기
Tailwind / CSS 변수 / SCSS / JSON을 선택하고 코드에 직접 복사하세요.

음영 생성기 FAQ

사람들이 실제로 음영 생성에 대해 묻는 네 가지 질문입니다.

왜 11단계인가요?: 11개의 중간점을 가진 50-950은 주류 디자인 시스템(Tailwind, Radix)에서 사용되는 스케일과 일치하므로 교체 비용이 전혀 들지 않습니다.
색조가 변동되나요?: 아니요. 보간은 OKLCH에서 실행되며 색상이 가장 가까운 단계에 고정되므로 50부터 950까지 색조가 유지됩니다.
상업적으로 해당 스케일을 사용할 수 있나요?: 네. 음영 스케일은 라이선스가 없는 계산된 숫자이므로 내보낸 것은 당신의 것입니다.
일부 단계가 회색으로 나오는 이유는 무엇인가요?: 고채도 색상은 극단에서 sRGB를 벗어납니다. 엔진은 해당 지점에서 채도를 압축하여 단계가 회색이나 네온으로 변하는 대신 선명하게 유지되도록 합니다.

결과를 받은 후

여기에서 계속해서 색상을 활용하세요.

표준 매칭

RAL, Pantone, NCS 코드나 HEX 값을 입력하면 CIEDE2000 ΔE를 기준으로 10가지 표준 시스템 전체에서 일치하는 색상을 찾아줍니다.

대비 검사기

임의의 전경색과 배경색 간의 WCAG 2.1 대비 검증을 수행합니다.

팔레트 보드

스페이스바로 무작위화, 잠금, 드래그하여 재정렬, URL로 공유 — 팔레트 보드가 해야 할 모든 기능을 제공합니다.

AI 팔레트 스튜디오

장면이나 분위기를 한 줄로 설명하면 — 근거가 담긴 5가지 역할의 팔레트를 얻을 수 있습니다.

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff5ff", 100: "#ffe0ff", 200: "#ffc2fd", 300: "#ffa0f9", 400: "#ff75f2", 500: "#f335e5", 600: "#e300d6", 700: "#cb00c0", 800: "#ae00a5", 900: "#8d0087", 950: "#660062", }, }, }, }, };

음영 생성기 작동 방식 - 입력, 확인, 내보내기.

OKLCH에서 지각적으로 균일한 한 색상에서 11단계 디자인 시스템 스케일을 가져옵니다.

입력

HEX를 붙여넣거나 모든 색상 페이지에서 "스케일 만들기"를 눌러 값을 가져옵니다.

확인

색상이 가장 가까운 단계에 맞춰지며, 모든 단계 아래에 흰색 및 검은색과의 WCAG 대비가 표시됩니다.

내보내기

Tailwind / CSS 변수 / SCSS / JSON을 선택하고 코드에 직접 복사하세요.

음영 생성기 FAQ

사람들이 실제로 음영 생성에 대해 묻는 네 가지 질문입니다.

왜 11단계인가요?

11개의 중간점을 가진 50-950은 주류 디자인 시스템(Tailwind, Radix)에서 사용되는 스케일과 일치하므로 교체 비용이 전혀 들지 않습니다.

색조가 변동되나요?

아니요. 보간은 OKLCH에서 실행되며 색상이 가장 가까운 단계에 고정되므로 50부터 950까지 색조가 유지됩니다.

상업적으로 해당 스케일을 사용할 수 있나요?

네. 음영 스케일은 라이선스가 없는 계산된 숫자이므로 내보낸 것은 당신의 것입니다.

일부 단계가 회색으로 나오는 이유는 무엇인가요?

고채도 색상은 극단에서 sRGB를 벗어납니다. 엔진은 해당 지점에서 채도를 압축하여 단계가 회색이나 네온으로 변하는 대신 선명하게 유지되도록 합니다.