대부분의 팔레트는 누군가가 이미 좋아하는 한 가지 색상으로 시작합니다: 브랜드 블루,로고의 녹색,결혼식을위한 패브릭 견본. 어려운 부분은 첫 번째 선택 이후의 모든 것입니다. 어떤 색상이 어울리고,얼마나 많이 필요하며,디자인 도구에서 균형 잡힌 것처럼 보이는 세트는 텍스트가 그 위에 앉으면 왜 무너 졌습니까?
색상 조화는 색상환의 간단한 기하학으로 처음 두 질문에 답합니다. 대비는 세 번째 질문에 답하며 사람들이 건너뛰는 질문입니다. 이 가이드는 확인할 수 있는 실제 HEX 값과 함께 두 가지 모두를 다루고 무료 방법을 보여줍니다 색상 팔레트 생성기 1 개의 기본 색깔을 팔레트의 6 개의 종류로 돌립니다.
TL;DR: 색상 팔레트 생성기는 고정 각도 (보완의 경우 180 도,3 진법의 경우 120,4 진법의 경우 90,유사한 경우 30 및 60) 에 의해 HSL 색상 휠 주위의 기본 color's 색조를 회전하거나 밝기를 이동하여 음영,색조 및 단색 세트를 만듭니다. Toolz 색상 팔레트 생성기는이 클라이언트 측,무료, 가입 없음: 베이스를 선택하고,6 가지 모드 중 하나를 선택하고,스워치를 클릭하여 HEX 코드를 복사하거나,전체 세트를 CSS 사용자 정의 속성으로 복사합니다. HSL 은 지각 적으로 균일하지 않으므로 배송하기 전에 WCAG 대비 비율에 대해 텍스트 및 배경 쌍을 확인하십시오.
색상 팔레트 생성기 란 무엇입니까?
색상 팔레트 생성기는 하나의 시작 색상을 가져와 고정 된 규칙을 사용하여 관련 색상을 계산하는 도구이므로 세트는 시행 착오없이 조화롭게 보입니다. 규칙은 색상 휠에서 나옵니다: 서로 반대되는 색상은 대비되고,옆에있는 색상은 혼합되며,바퀴 밸런스 주위에 균등하게 간격을 둔 색상입니다.
Toolz 생성기는 색상을 색조,채도 및 밝기로 설명하는 HSL 에서 작동합니다. 색조는 휠 주위의 0 도에서 360 도까지의 각도 (0 에서 빨간색,120 에서 녹색,240 에서 파란색) 입니다. 채도는 색상이 얼마나 생생한 지,0% 회색에서 100% 풀 컬러까지입니다. 밝기는 0% 검정색에서 100% 흰색까지 실행됩니다. HSL 은 웹에 대해 정의됩니다 CSS 컬러 모듈 레벨 4 사양 및 모든 브라우저는 이를 동일한 RGB 값으로 변환합니다.
HSL 에서 작업하면 조화 규칙을 쉽게 표현할 수 있습니다. 보색은 색조에 180 을 추가 한 채도와 가벼움과 동일합니다. 그것은 RGB 슬라이더를 많이 만지작 거리는 대신 하나의 추가입니다.
6 가지 조화 모드는 무엇입니까?
각 모드는 기본 색상에서 벗어나기 위한 레시피입니다. 소스 코드에서 가져온 Toolz 생성기가 각 모드에서 수행하는 작업은 다음과 같습니다.
| 모드 | 무엇이 변하는가 | 견본 | 색조 위치 |
|---|---|---|---|
| 음영 & amp; 색조 | 가벼움만 90, 75, 60, 기본값 35, 22, 12로 설정됩니다 | 7 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 70 X 100 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X 70 X | 베이스 색조 |
| 단색의 | 가벼움과 채도가 함께 | 5 X 1000 X 1000 X 1000 X 100 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 5 | 베이스 색조 |
| 보완적인 | 색조는 더 밝은 베이스와 더 어두운 보수로 180도 뒤집힙니다 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | 베이스, 베이스 + 180 |
| 유사한 | 색조 단계 30 각 방법 | 5 X 1000 X 1000 X 1000 X 100 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 5 | -60, -30, 밑수, +30, +60 |
| 삼극일치의 | 색조는 원의 3분의 1 간격으로 떨어져 있습니다 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 베이스, +120, +240 |
| 테트라딕 | 색조는 원의 4분의 1 간격으로 떨어져 있습니다 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | 베이스, +90, +180, +270 |
두 가지 세부 사항은 실제로 중요합니다. 유사,삼극 및 사극은 모든 견본에서 기본 color's 채도 및 밝기를 유지하므로 색조 만 변경합니다. 음영 & amp; 색조와 단색은 색조를 유지하고 밝기를 변경하므로 한 가지 색상의 밝고 어두운 버전을 생성합니다.
작업 예: #4466ee의 모든 모드
생성기는 중간 파란색인 #4466ee 로 열립니다. HSL 로 변환하면 색조 228,채도 83%, 밝기 60%입니다. 각 모드가 해당 베이스에 대해 반환하는 것은 다음과 같습니다. 도구가 인쇄하는 HEX 코드이며 CSS 사양의 표준 HSL 에서 RGB 로 변환하여 재현할 수 있습니다.
삼극일치의 색조에 120 과 240 을 더합니다: 228,그 다음 348,그 다음 108 (468 은 108 을 감싸고 있습니다).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
패턴을 주목하십시오. 동일한 채도와 가벼움에서 휠의 정확히 3 분의 1 만큼 회전하면 동일한 3 개의 RGB 채널 값이 다시 섞입니다: 44,66 및 ee 거래 장소.
보완적인 따뜻한 노란색인 색조 48 에 떨어지는 180 을 추가합니다. 모드에는 베이스의 밝은 버전과 보수의 어두운 버전도 포함되어 있으므로 4 개의 견본을 얻을 수 있습니다: #8aa0f4, #4466ee, #eecc44 및 #d2ac14.
유사한 168 에서 288 까지 한 번에 30 도 단계: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. 청록색에서 파란색을 거쳐 보라색까지 밴드로 읽습니다.
테트라딕 90,180 및 270 을 추가합니다: #4466ee, #ee44bb, #eecc44, #44ee77.
단색의 색조 228 을 유지하고 양방향의 가벼움을 위해 채도를 거래합니다: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
음영 & amp; 색조 가벼움을 기본값인 35,22 및 12 인 90,75, 60 으로 설정합니다: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
마지막 것은 알만한 가치가있는 기이함을 보여줍니다. 그늘 눈금은 고정 된 가벼움 단계와 base's 자신의 가벼움을 사용합니다. 베이스가 정확히 90,75, 60,35, 22 또는 12 퍼센트 가벼움에 앉을 때 #4466ee 가 60 에서하는 것처럼 두 개의 견본이 동일하게 나옵니다. 7 개의 뚜렷한 색상을 원한다면 기본 가벼움을 한 단계 씩 쿡쿡 찌르십시오.
직업에 적합한 조화를 어떻게 선택합니까?
디자인이 얼마나 많은 대비를 필요로 하는가에 의하여 조화를 쑤시십시오. 낮 대조 계획은 평온하게 느끼고 일관성을 유지하기 쉽습니다; 높 대조 계획은 주의를 당기고 과용하게 쉽습니다.
| 목표 | 좋은 시작 모드 | 왜 |
|---|---|---|
| UI 컬러 스케일(100~700) | 음영 & amp; 색조 | 하나의 색조, 예측 가능한 빛에서 어둠의 단계 |
| 최소한의 응집력 있는 브랜드 | 단색의 | 모든 것이 색조를 공유하며 충돌하는 것은 없습니다 |
| 눈에 띄는 행동 촉구 | 보완적인 | 반대 색조는 가장 강한 대비입니다 |
| 부드럽고 자연스러운 모습 | 유사한 | 이웃 색조 혼합 |
| 장난스럽고 균형 잡힌 세트 | 삼극일치의 | 세 가지 균일한 간격의 색상, 지배적인 색상은 없습니다 |
| 여러 시리즈가 포함된 차트입니다 | 테트라딕 | 여전히 관련된 네 가지 뚜렷한 색상 |
레이아웃에 대한 일반적인 경험 법칙은 한 가지 색상이 대부분의 영역을 덮고 두 번째 색상은 더 작은 몫을 차지하며 악센트는 드물게 나타나는 것입니다. 모든 색상에 동일한 공간을 제공하는 것이 크게 보이는 경향이 있는 보완적이고 삼극 팔레트와 잘 작동합니다.
팔레트는 왜 균형이 잡혀 보이지만 읽기가 좋지 않습니까?
팔레트는 HSL 에서 균형을 보일 수 있지만 HSL 가벼움은 색상이 사람에게 얼마나 밝게 보이는지가 아니기 때문에 화면에서 여전히 실패합니다. HSL 은 60% 밝기의 모든 색조를 똑같이 가볍게 취급합니다. 인간의 시각은 그렇지 않습니다.
위의 보완적인 예가 이 콘크리트를 만듭니다. #4466ee 와 #eecc44 는 모두 HSL 밝기가 60%입니다. 웹 콘텐츠 접근성 가이드 라인이 인지된 밝기에 사용하는 측정 인 상대 휘도는 매우 다릅니다: 파란색은 약 0,17,노란색은 눈에 몇 배 더 밝습니다.
그 간격은 대조로 나타납니다. WCAG 공식을 사용하여, 대조 비율 = (L1 + 0.05) / (L2 + 0.05), 여기서 L1 는 더 가벼운 color's 발광성입니다:
| 쌍 | 명암비 | 일반 텍스트용 WCAG AA(4.5:1) |
|---|---|---|
| #4466ee에 흰색 텍스트 | 약 4.77:1 | 통과하다 |
| #eecc44의 흰색 텍스트 | 약 1.57:1 | 실패하다 |
| #eecc44의 검정색 텍스트 | 약 13.4:1 | 통과하다 |
생성기 자체는 이미 이에 반응합니다: 각 견본은 밝기 추정치에서 어두운 또는 흰색 라벨 텍스트를 선택하므로 노란색 견본은 어두운 라벨을 얻습니다. 실제 디자인의 경우 a 를 통해 사용하려는 텍스트 및 배경 쌍을 실행하십시오 색상 대비 검사기. 문턱은 에서 나온다 WCAG 2.2: AA 레벨의 일반 텍스트는 4.5:1, 대용량 텍스트는 3:1입니다. 그만큼 색상 대비 가이드 휘도 수학을 단계별로 살펴봅니다.
CSS 변수로 팔레트를 내보내려면 어떻게 해야 합니까?
CSS 복사를 클릭하면 생성기가 클립보드에 현재 팔레트를 CSS 사용자 지정 속성으로 표시합니다 :root. 이름은 견본 순서로 100 단계씩 번호가 매겨집니다. 삼극 예제의 경우:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
스타일시트 상단에 붙여넣고 색상을 어디에서나 참조하세요:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
번호 매기기는 밝기가 아닌 견본 순서를 따릅니다. Shades & amp; 빛에서 어둠으로 우연히 실행되는 색조 모드, 그래서 --color-100 는 가장 가벼운 색조입니다. 삼극 또는 유사 모드에서는 숫자가 위치 일뿐입니다. 변수의 이름을 다음과 같은 의미있는 것으로 바꿉니다 --brand, --accent 그리고 --surface 일단 선택했다면, 왜냐하면 --color-200 CSS를 읽는 다음 사람에게는 아무 의미가 없습니다.
대신 단일 색상을 복사하려면 견본을 클릭합니다. HEX 코드가 클립보드로 이동하고 견본은 "Copied"를 잠시 보여줍니다.
그것으로 결혼식이나 파스텔 팔레트를 만들 수 있습니까?
네,시작 색상만 가져오시면 됩니다. 웨딩 프리셋이나 큐레이팅된 테마가 없으므로 팔레트는 선택한 베이스만큼만 좋습니다.
결혼식을 위해,진짜 무언가에서 색깔을 가지고 가십시오: 꽃,초대장 주식,신부 들러리 복장 직물. 그것의 HEX 부호를 입력하고 각 형태를 시도하십시오. 세이지 녹색에서 출발, #9caf88,보완은 #c2ceb6, #9caf88,먼지 많은 라벤더 #9b88af 및 더 깊은 #755e8d 를 반환합니다. 세이지에 대한 그 라벤더는 고전적인 짝짓기이며 수학은 한 번의 클릭으로 그것을 발견했습니다.
파스텔의 경우 #a7c7e7 과 같은 창백하고 부드럽게 포화 된베이스에서 시작하십시오. 아날로그,Triadic 및 Tetradic 은 모든 견본에서 그 밝기와 채도를 유지하므로 전체 세트가 부드럽게 유지됩니다. 음영 & amp; 색조와 단색은 의도적으로 밝기를 이동하므로 어두운 색상을 추가하여 해당 파란색의 경우 #0d1f30 까지 별도의 밝기 슬라이더가 없습니다; 기본 색상이 컨트롤입니다.
스크린 색깔과 인쇄한 색깔은 다릅니다. 인쇄 기계가 청록색,자홍색, 황색 및 까만 잉크를 종이에 놓는 동안 감시자는 빨강,녹색 및 파란 빛을 섞고,몇몇 밝은 스크린 색깔에는 정확한 잉크 동등물이 없습니다. 팔레트가 문구용품 위에 가는 경우에,전체 실행의 앞에 인쇄한 증거를 주문하십시오.
일반적인 실수와 오류 사례는 무엇입니까?
대부분의 팔레트 문제는 입력이나 수학을 너무 멀리 신뢰하는 데서 비롯됩니다.
입력하는 동안 팔레트가 파란색으로 바뀝니다. 텍스트 상자에 유효한 HEX 코드가 있을 때까지 생성기는 #4466ee 로 다시 떨어집니다. 처럼 반쯤 입력된 값 #9c 또는 #9caf8 기본 파란색 팔레트를 보여줍니다. 필드는 3~6개의 16진수 숫자를 허용합니다 #, 그래서 #9ca 가는 중 #9caf88 #99ccaa 의 팔레트를 간략하게 보여줍니다.
베이스 견본은 한 걸음 떨어져 있습니다. 색상은 다시 변환되기 전에 전체 HSL 번호로 반올림되므로 일부 베이스는 정확히 왕복하지 않습니다. #c08081 은 예를 들어 #c18182 로 돌아옵니다. 차이점은 채널당 한 단위이며 보이지 않지만 브랜드 코드와 정확히 일치하는지 중요합니다: 베이스의 공식 HEX 를 유지하고 나머지에는 생성된 HEX 를 사용하십시오.
모든 곳에서 모든 색상을 사용합니다. 5색 유사 팔레트는 모두 작업이 필요한 5가지 색상이 아니라 선택할 수 있는 범위입니다.
대비를 건너뛰는 중. 위에 표시된 것처럼 동일한 HSL 밝기의 두 색상은 휘도가 3 배 이상 다를 수 있습니다. 텍스트 쌍 확인.
지각적 균일성을 기대합니다. 음영 단계는 HSL 가벼움에서도,빛이 어떻게 보이는지가 아닙니다. 균일하게 보이는 스케일이 필요하다면 눈으로 개별 단계를 조정하거나 CSS Color 4 도 정의하는 OKLCH 와 같은 지각 공간에서 작업하십시오.
이것은 다른 컬러 도구와 어떻게 비교됩니까?
팔레트 생성은 더 긴 워크플로우의 한 단계입니다. 표에는 각 단계에 맞는 도구가 표시됩니다.
| 작업 | 도구 | 그것이 당신에게 주는 것 |
|---|---|---|
| 시작 색상을 찾거나 샘플링합니다 | 색상 선택기 | 모든 색상에 대한 HEX, RGB 및 HSL |
| 조화로운 세트를 구축하세요 | 색상 팔레트 생성기 | 6가지 조화 모드, CSS 내보내기 |
| 한 가지 색상의 세밀한 스케일을 만듭니다 | 색상 음영 생성기 | 전용 색조와 그늘 램프 |
| 두 가지 색상을 혼합 | 컬러 믹서 | 두 입력 사이의 중간 색상 |
| 텍스트 가독성 확인 | 색상 대비 검사기 | WCAG 비율 및 통과 또는 실패 |
조화보다 규모가 더 중요하다면 색조와 색조 생성에 대한 안내입니다 50 에서 900 경사로를 건축에 더 깊은 갑니다. 모든 색깔 공구는에 목록으로 만들어집니다 컬러 도구 허브.
발전기는 비공개이며 오프라인에서 작동합니까?
예. 모든 HSL 수학 및 렌더링은 JavaScript 로 브라우저에서 실행됩니다. 입력한 내용이 업로드되지 않으며 페이지가 로드된 후 팔레트 생성기 네트워크 연결 없이 계속 작동합니다. 견본이나 CSS 를 복사하면 색상이 아닌 현재 모드를 기록하는 일일 사용량 한도에 포함됩니다.
