Color Palette Generator
Generate color palettes
Generate color palettes 브라우저에서 로컬로 실행됩니다.
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
색상 팔레트 생성기는 하나의 기본 색상을 취하고 그로부터 표준 조화 구성표(보색, 유사, 3원, 분할 보색 및 4원)와 흰색을 향한 색조 램프, 검정을 향한 음영 램프를 파생합니다. 채도와 밝기를 유지하면서 색조를 회전하여 HSL에서 하모니를 계산합니다. 이것이 바로 결과가 표류하는 대신 기본과 관련된 상태를 유지하는 이유입니다. 램프는 대부분의 팔레트에 실제로 필요한 부분입니다. 작업 인터페이스에는 하나의 강조 색상이 아니라 호버, 활성 및 비활성화 상태에 대해 동일한 색조의 여러 값이 필요하기 때문입니다.
Where people use the
- 단일 브랜드 색상을 중심으로 팔레트를 구축합니다.
- 하나의 악센트에서 호버, 활성 및 비활성화 변형을 생성합니다.
- 대비 검사에 실패한 색상에 대한 대안을 탐색합니다.
- 표면과 경계에 대한 중립 경사로를 생성합니다.
How to use the
- 1
기본 색상을 선택하세요
4ECDC4와 같은 16진수 값을 입력하거나 선택기를 사용하세요. 다른 모든 것은 이 하나의 색상에서 파생됩니다.
- 2
조화 계획 읽기
각 구성표는 서로 다른 색조 회전입니다. 상보형은 180도, 삼원형은 120도와 240도 등입니다.
- 3
색조 및 음영 램프 이용
흰색에 대한 5가지 색조와 검정색에 대한 5가지 색조가 실제 인터페이스에 필요한 상태와 고도를 제공합니다.
- 4
값 복사
생성된 16진수 값의 전체 목록은 하나의 블록에 있으며 스타일시트나 디자인 토큰 파일에 붙여넣을 수 있습니다.
- 5
배송 전 대비 확인
대비 검사기를 통해 팔레트의 텍스트 및 배경 쌍을 실행하십시오. 조화로운 것은 읽을 수 있는 것과는 다릅니다.
팁 및 모범 사례
- 브랜드에서 기본 색상을 선택한 다음 상태의 밝기만 조정하세요.
- 주목받고 싶은 한 가지 행동에 대해 보색을 예약하세요.
- 배송 전에 항상 대비 확인을 통해 최종 페어링을 실행하세요.
자주 묻는 질문
계획의 차이점은 무엇입니까?
보색은 가장 강한 대비를 제공하고 행동 촉구에 적합한 반대 색상을 사용합니다. 유사점은 조용하고 안전한 이웃을 양쪽으로 30도 사용합니다. Triadic은 세 가지 색상을 고르게 퍼뜨려 생생하고 제어하기 어렵습니다. 분할 보색은 반대편의 두 가지 색상을 사용하여 보색 충돌을 부드럽게 합니다. Tetradic은 직각으로 4가지 색상을 사용하므로 복잡한 대시보드에 적합합니다.
생성된 색상이 동일한 채도와 밝기를 공유하는 이유는 무엇입니까?
색조만 회전하면 눈에 띄는 연관성을 유지할 수 있기 때문입니다. 밝기를 동시에 변화시키면 관련성이 없어 보이는 색상이 생성되어 팔레트의 요점을 무너뜨립니다.
틴트는 그냥 흰색에 섞인 색인가요?
사실상 그렇습니다. 그러나 색조와 채도를 유지하면서 밝기를 높여 HSL에서 계산됩니다. 이는 색상을 안정적으로 유지하는 반면 RGB의 순진한 혼합은 회색으로 이동합니다.
팔레트에는 몇 가지 색상이 있어야 합니까?
대부분의 인터페이스에는 2~3가지 색상과 중립 램프가 있으면 충분합니다. 5가지 채도가 높은 색상을 사용하는 구성표는 일관되게 사용하기 어렵고 일반적으로 우연히 보이는 결과를 낳습니다.
접근성을 확인하나요?
아니요, 색상만 생성됩니다. 텍스트에 사용하려는 페어링에 대비 검사기를 사용하세요.