색상 휠

Adobe 스타일 조화 규칙이 있는 대화형 휠에서 색상 테마를 만듭니다.

색상 휠은 대화형 색조 휠에서 5색 테마를 만듭니다. 조화 규칙을 선택하고 핸들을 끌어 테마를 회전시키고 전체 밝기를 조정하며 각 색을 HEX, RGB, HSV로 편집하세요.

모드

밝기80%

활성 색상1

RGB

HSV

출력

{
  "mode": "analogous",
  "brightness": 80,
  "colors": [
    "#cc1f3c",
    "#cc581f",
    "#cc1f92",
    "#ccaf1f",
    "#af1fcc"
  ]
}

출력

--theme-1: #cc1f3c;
--theme-2: #cc581f;
--theme-3: #cc1f92;
--theme-4: #ccaf1f;
--theme-5: #af1fcc;

사용 방법

조화 규칙은 어떻게 작동하나요?

각 규칙은 다섯 핸들을 고정 색조 각도로 유지하며 핸들을 끌면 전체 그룹이 그 색을 중심으로 회전합니다. 사용자 지정 모드는 각 핸들을 독립적으로 이동합니다.

밝기 슬라이더는 어떻게 동작하나요?

잠금 해제된 모든 색의 값을 동시에 업데이트합니다. 스와치를 편집하면 밝기를 다시 움직일 때까지 해당 색만 변경됩니다.

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

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

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

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

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

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