색상 톤 생성기

내보낼 수 있는 CSS 변수로 밝은 톤과 어두운 톤 스케일을 생성합니다.

색상 톤 생성기는 기본 색에서 밝은 톤과 어두운 톤 스케일을 만들고 그라데이션 막대로 미리 보며 바로 사용할 수 있는 CSS 사용자 지정 속성을 내보냅니다.

색상

개수

모드

출력

{
  "mode": "tint",
  "count": 5,
  "colors": [
    "#4c7fef",
    "#739bf2",
    "#9ab7f6",
    "#c1d2f9",
    "#e8eefd"
  ],
  "cssVars": "--shade-1: #4c7fef;\n--shade-2: #739bf2;\n--shade-3: #9ab7f6;\n--shade-4: #c1d2f9;\n--shade-5: #e8eefd;"
}

사용 방법

기본 색을 선택하세요.
단계 수와 밝은 톤, 어두운 톤 또는 둘 다 생성 여부를 선택하세요.
색상 또는 CSS 변수를 복사하세요.

자주 묻는 질문

밝은 톤과 어두운 톤은 어떻게 만들어지나요?

밝은 톤은 흰색 방향으로, 어두운 톤은 검정 방향으로 밝기를 보간합니다.

팔레트를 공유할 수 있나요?

네, 색상, 개수, 모드가 URL 쿼리 매개변수에 저장됩니다.

색상 팔레트 생성기

무작위, 유사, 보색, 삼색 모드로 조화로운 색상 팔레트를 만듭니다.

색상 변환기

HEX, RGB, HSL, HSV 색상을 즉시 변환합니다.

색상 대비 확인

접근 가능한 텍스트와 UI를 위한 WCAG 대비 비율을 확인하세요.

색각 이상 시뮬레이터

일반적인 색각 이상 유형에서 이미지가 어떻게 보이는지 미리 확인합니다.

색상 그라데이션 생성기

사용자 지정 색상과 방향으로 CSS 선형 그라데이션을 만듭니다.

색상 이름 찾기

모든 색상 값에 가장 가까운 CSS 색상 이름을 찾습니다.