내가 출하한 모든 디자인 시스템은 단일 브랜드 색상으로 시작한 다음 즉시 12 개가 더 필요했습니다. 하나의 파란색으로는 결코 충분하지 않습니다. 호버 상태에는 밝은 파란색,선택한 행 배경에는 훨씬 밝은 파란색,창백한 표면에있는 텍스트에는 어두운 파란색,소리 지르지 말아야 할 비활성화 된 버튼에는 음소거 된 파란색이 필요합니다. [Toolz.dev] (/, 나는 컬러 피커를 계속 열어 밝기 슬라이더를 살짝 밀고 결과가 여전히 같은 가족처럼 보이는지 눈알을 채우고 한 번에 하나씩 내 스타일 시트에 육각 코드를 붙여 넣었다. 효과가 있었지만 느리고 결과가 일관되지 않았기 때문에 "nudge until it looks right" 반복 가능한 프로세스가 아닙니다.
그래서 나는 을 만들었습니다 색상 음영 생성기. 당신은 그것에게 1 개의 색깔을 주고 그것은 당신에게 3 개의 완전한 가늠자를,색깔 공간에서 산출해 줍니다 CSS 컬러 모듈 레벨 4 육각 숫자를 슬쩍하는 것이 아니라 정의합니다: 흰색을 향해 나아가는 색조,검은 색을 향해 나아가는 색조,회색을 향해 나아가는 색조. 이 가이드에서는 이 세 단어가 실제로 무엇을 의미하는지,수학이 어떻게 작동하는지,그리고 단일 브랜드 색상을 CSS 에 바로 떨어 뜨릴 수있는 일관된 팔레트로 바꾸는 방법을 설명합니다.
TL;DR: 색조는 흰색과 혼합된 색상이고,그늘은 검정색과 혼합된 색상이며,톤은 회색과 혼합된 색상입니다. 각각은 원래의 색조를 유지하고 색상이 밝거나 어둡거나 음소거된 모습만 변경합니다. HEX,RGB 또는 HSL 값을 붙여넣고 원하는 단계를 선택하면 생성기는 세 가지 스케일을 모두 한 번에 빌드하며 각 스와치는 HEX,RGB 또는 HSL 로 복사할 수 있습니다. 모든 것이 브라우저에서 실행됩니다.
색조, 음영, 톤의 차이점은 무엇입니까?
이 세 단어는 전통적인 색 이론에서 유래한 것으로, 근본적으로 어떤 색인지 바꾸지 않고 색을 바꾸는 세 가지 다른 방법을 설명합니다. 디자이너와 점점 더 디자인 토큰이 단어를 정확하게 사용하기 때문에 구별은 올바르게 할 가치가 있습니다.
틴트는 흰색과 섞인 색상입니다. 흰색을 추가하면 밝기가 높아지고 색상이 부드러워집니다. 분홍색은 빨간색의 색조이며 베이비 블루는 더 강한 파란색의 색조입니다. 색조는 창백한 배경,미묘한 채우기 및 인터페이스에서 가장 밝은 표면이 필요할 때 도달하는 것입니다.
색조는 검은색과 섞인 색입니다. 검은색을 추가하면 밝기가 낮아지고 색이 깊어집니다. 적갈색은 빨간색,네이비는 파란색입니다. 색조는 저울의 어두운 끝을 제공합니다: 텍스트 색상,누른 버튼 상태,베이스보다 더 많은 무게가 필요한 테두리.
톤은 회색과 섞인 색상입니다. 회색을 추가하면 극적으로 밝거나 어둡게 만들지 않고 color's 강도가 감소합니다. 톤은 세 가지 중 가장 덜 사용되며,화려함보다는 세련된 느낌을 주는 팔레트 뒤에 숨은 비밀입니다. 톤 다운된 색상은 더 차분하고 전문적인 것으로 읽혀지며,이것이 음소거된 팔레트가 진지한 제품 디자인을 지배하는 이유입니다.
세 가지 모두가 공유하는 중요한 점은 색조를 보존한다는 것입니다. 파란색의 색조는 여전히 파란색이고 파란색의 색조는 여전히 파란색이며 파란색의 색조는 여전히 파란색입니다. 그것이 색조,음영 및 음색 세트를 임의의 구색이 아닌 하나의 가족처럼 보이게 만드는 것입니다.
각 척도는 실제로 어떻게 계산됩니까?
후드 아래,모든 견본은 RGB 공간에서 두 가지 색상 사이의 직선 혼합이다. 발전기는 빨간색,녹색, 파란색 트리플로 기본 색상을 소요하고,그것은 대상 색상을 소요,다음 짝수 단계로 하나에서 다른 도보로 틴트에 대한 대상은 흰색입니다 (255, 255, 255). 그늘을 위해 표적은 검정,입니다 (0, 0, 0). 음색을 위해 표적은 중간 회색,입니다 (128, 128, 128).
어떤 단일 채널에 대한 믹스는 간단한 산술입니다. 베이스에서 타겟을 향해 삼십 퍼센트 방법 견본을 얻으려면,당신은 계산 base + (target - base) * 0.30 빨간색 채널의 경우,그 다음 녹색 채널,그 다음 파란색 채널,그리고 정수로 둥글게됩니다. 10 단계 색조 척도는 10 퍼센트,20 퍼센트,등등 최대 백 퍼센트까지 그 계산을 실행하며,여기서 색상은 순수한 흰색이됩니다. 기본 색상 자체는 각 척도의 상단에있는 0 퍼센트 견본으로 포함되어 있으므로 항상 어디서 시작했는지 확인할 수 있습니다.
혼합은 RGB 에서 채널 당 발생하기 때문에 색조는 색조와 음영에 대해 본질적으로 고정 된 상태로 유지됩니다. 순수한 흰색 또는 순수한 검정색을 향한 혼합은 색상이 반사되는 빛의 양을 변경하지만 기본 특성은 변경하지 않으므로 동일한 베이스의 색조와 음영은 다른 밝기에서 동일한 색상으로 읽혀집니다. 회색은 중립적 인 중심에 앉아 약간 채도를 낮추기 때문에 톤은 인식 된 색조를 머리카락으로 바꿀 수 있지만 실제로 전체 스케일은 여전히 하나의 색상으로 읽혀집니다. 주어진 견본이 형식에 걸쳐 어떻게 착륙하는지 정확하게 검사하려면 컬러 변환기 HEX, RGB, HSL 및 HWB 값을 나란히 표시합니다.
왜 그냥 HSL의 가벼움을 바꾸지 않을까요?
합리적인 질문은 도구가 단순히 RGB를 올리거나 내리는 것이 아니라 RGB에서 혼합되는 이유입니다 L HSL 의 가치. 두 접근법 모두 단색 스케일을 생성하며 둘 다 유효합니다. RGB 에서 흰색과 검정색을 향한 혼합은 색조와 음영의 고전적인 painter's 모델이며 디자이너가 이미 사용하는 단어에 깔끔하게 매핑됩니다. 또한 끝점을 정직하게 유지합니다: 백퍼센트 색조는 정확히 흰색이고 백퍼센트 색조는 정확히 검정색이며 채도가 상호 작용하는 방식 때문에 HSL 밝기 만 조작 할 때 항상 사실이 아닙니다. 생성기는 "less intense"를 다루기 위해 특별히 세 번째 스케일로 톤을 제공합니다. 순수한 가벼움 변화는 다루지 않는 축.
몇 단계를 생성해야 합니까?
발전기를 사용하면 스케일당 2~20단계 중에서 선택할 수 있으며 올바른 숫자는 무엇을 만들고 있는지에 따라 달라집니다. 같은 이름의 램프를 원하는 설계 시스템의 경우 blue-50 통해 blue-900,더 큰 단계 수는 당신에게 당신이에서 간색할 수 있는 정밀한 기온변화를 줍니다. 호버와 활동적인 국가의 빠른 쌍을 위해,서너 단계는 많음입니다. 나의 과태는 10 개,1 개의 기초에서 열 색조,열 음영 및 열 음색이 저에게 견본의 압도적인 벽 없이 가득 차있는 일 팔레트를 주기 때문에,입니다.
더 많은 단계는 인접한 색상 사이의 작은 점프를 의미하며,이는 데이터 테이블의 교대 밴드처럼 인접한 음영이 시각적으로 구별되지만 가까워야 할 때 원하는 것입니다. 단계가 적다는 것은 더 대담한 점프를 의미하며,이는 각 색상이 분명히 다른 작업을 갖는 컴팩트한 팔레트에 맞는 오답이 없으며 도구가 즉시 재계산하기 때문에 간격이 올바르게 보일 때까지 단계 수를 위아래로 밀 수 있습니다.
색조는 불투명도를 낮추는 것과 어떻게 다른가요?
제가 일찍 빠져든 함정은 불투명도를 이용해 색조를 속이는 것이었습니다. 동등한 것 같습니다: 파란색 버튼을 흰색 페이지 위에 50 퍼센트의 불투명도로 떨어뜨리면 밝은 파란색처럼 보입니다. 문제는 불투명도가 색상이 아니라 합성 명령이며 요소 뒤에 있는 모든 것에 전적으로 의존한다는 것입니다. 어두운 표면 위의 동일한 50 퍼센트 파란색은 진흙 투성이의 진한 파란색이 되고,사진 위에서는 예측할 수 없게 됩니다. Your "light blue"는 배경에 따라 정체성을 바꾸는데,이는 디자인 시스템이 필요로 하는 것과 반대입니다.
틴트는 가벼움을 실제 불투명한 색상으로 구워서 이를 해결합니다. 생성기가 제공하는 견본은 뒤에 무엇이 있든 동일하게 보이는 고정된 육각 값입니다. 왜냐하면 완전히 불투명하기 때문입니다. 제품의 모든 표면에서 예측 가능하게 동작하는 일관된 밝은 버전의 색상이 필요할 때 투명도보다는 틴트를 사용하십시오. 오버레이 및 스크림과 같은 진정한 투명도 효과를 위해 불투명도를 예약하십시오. 실제로 배경을 통해 보여주기를 원하는 곳. 이 두 아이디어를 분리하는 것은 팔레트가 우연이 아닌 견고하게 느껴지는 조용한 습관 중 하나입니다.
이 저울을 어떻게 사용 가능한 팔레트로 바꾸나요?
팔레트는 단순한 색상 더미가 아니라 과제 집합입니다. 여기에 단일 브랜드 색상에서 시작할 때 사용하는 워크 플로우가 있습니다. 기본 작업 색상으로 기본 버튼과 링크에있는 기본 작업 색상으로베이스를 가져옵니다. 배경의 색조에 도달: 페이지 또는 카드 표면에 매우 밝은 색조,빛 요소의 호버 상태에 대해 약간 강한 색조. 텍스트 및 강조를 위해 색조에 도달: 창백한 색조에 대비해야하는 본문 복사본에 대한 깊은 색조,기본 버튼의 누른 상태에 대한 중간 색조. 사용 톤은 현재 색상이 필요하지만 비활성화 된 컨트롤이나 보조 배지처럼 조용합니다.
건너뛸 수 없는 한 가지 규칙은 대비입니다. 버튼 배경으로 사랑스러워 보이는 색조는 라벨 텍스트가 접근성 대비 요구 사항을 충족하지 못하면 쓸모가 없습니다. 일단 서로 겹쳐서 사용할 색상 쌍을 선택하면 다음을 통해 실행하십시오 색상 대비 검사기 그들이 WCAG 임계 값을 지우는 것을 확인하기 위해. 아름다운 음영을 선택하는 것은 쉬운 부분입니다. 그 위에있는 텍스트를 읽을 수 있는지 확인하는 것은 실제 팔레트를 무드 보드에서 분리하는 부분입니다.
아래 표는 일반적으로 10단계 척도를 인터페이스 역할에 매핑하는 방법을 보여줍니다.
| 스와치 소스 | 전형적인 역할 | 사용 예 |
|---|---|---|
| 가장 가벼운 색조 | 표면 및 배경 | 페이지 배경, 카드 채우기, 선택한 행 |
| 가벼운 색조 | 가벼운 요소에 상태를 호버링합니다 | 버튼 호버, 목록 항목 호버 |
| 베이스 색상 | 기본 조치 | 메인 버튼, 활성 링크, 브랜드 악센트 |
| 중간 음영 | 압박되고 활동적인 상태 | 버튼 활성, 집중된 테두리 |
| 어두운 색조 | 텍스트와 높은 강조 | 밝은 표면의 본문 텍스트, 제목 |
| 톤 | 음소거된 보조 요소 | 비활성화된 컨트롤, 보조 배지 |
이것이 다른 색상 도구와 어떻게 어울리나요?
음영 생성기는 작은 오케스트라에서 하나의 악기입니다. 그것은 질문에 대답 "이 하나의 색상을 더 줘, " 하지만 실제 팔레트 작업은 너무 몇 가지 인접 질문에 닿아. 당신은 보완 또는 유사 세트처럼 같은 색조가 아닌 조화로운 색상을 필요로 할 때,그 색상 팔레트 생성기 그러한 관계를 구축합니다. 이미지나 디자인에서 시작 색상을 샘플링하고 정확한 값을 읽어야 할 때,the 컬러 피커 16 진수 코드를 가져옵니다. 그리고 당신의 음영이 하나에서 다른으로 희미해지는 CSS 배경으로 향할 때, the 그라데이션 생성기 그 중 두 개를 바로 붙여넣을 수 있는 상태로 만듭니다 linear-gradient.
자연적인 파이프라인은 이렇게 본다: 기본 색깔을 쑤시거나 풀칠하고,그것의 색조,그늘 및 음색을 생성하고,대조 검사기에 대하여 겹쳐 쌓이는 것을 계획하는 쌍을 확인하고,승자를 당신의 stylesheet 또는 디자인 토큰으로 베끼는 그 공구의 각자는 브라우저에서 완전히 달린다,그래서 당신이 아직 발표하지 않은 상표 색깔은 anyone's 서버에 결코 여행하지 않는다. 국부적으로 첫번째 장식새김이 당신이 공유하는 가치인 경우에,에 조각 데이터 개인 정보 보호 및 온라인 도구 내가 왜 모든 것을 그런 식으로 구축하는지 설명합니다 웹 개발자 툴킷 내 일상 작업 흐름에 살고있는 유틸리티의 나머지 부분을 수집합니다.
빠르게 작업한 예제
브랜드 블루로 시작하세요 #4466EE. 스텝 카운트를 10 으로 설정하고 복사 형식을 HEX 에 둡니다. 생성기는 3 개의 열을 반환합니다.
색조 열은 에서 시작됩니다 #4466EE 그리고 흰색을 향해 올라가며 최종 견본이 나올 때까지 점점 더 연한 파란색을 통과합니다 #FFFFFF니다. 어딘가에 중간에서 당신은 훌륭한 선택한 행 배경을 만드는 부드러운 periwinkle 을 얻을. 음영 열은 같은에서 시작합니다 #4466EE 그리고 검은색을 향해 내려가면 텍스트와 누른 상태에 적합한 깊은 인디고를 제공합니다 #000000. 톤 열은 에서 시작됩니다 #4466EE 그리고 회색으로 이동하여 차분하고 절제된 것으로 읽혀지는 음소거된 슬레이트 블루를 생성하고 끝납니다 #808080.
그 하나의 입력으로부터 여러분은 이제 배경 (밝은 색조), 호버 채우기 (약간 더 어두운 색조), 원색 (기본), 텍스트 색상 (어두운 색조), 비활성화된 색상 (음색) 을 가지고 있습니다. 어떤 견본이라도 클릭하여 복사하고,프로젝트가 그것을 선호한다면 복사 형식을 RGB 또는 HSL 로 전환하고,붙여넣기하십시오. 과거에는 색상 선택기로의 스무 번의 여행이 이제는 하나의 붙여넣기와 한 줌의 클릭이며,수학이 결정적이기 때문에 팔레트는 매번 일관됩니다.
자주 묻는 질문
색조, 음영, 톤의 차이점은 무엇입니까?
틴트는 흰색과 섞여서 더 밝게 만드는 색입니다. 음영은 검정색과 섞여서 더 어둡게 만드는 색입니다. 톤은 회색과 섞여서 밝거나 어두운지 변경하지 않고 음소거하는 색상입니다. 세 가지 모두 원래 색상을 유지하고 밝은 색상,어두운 색상 또는 채도가 나타나는 방식만 변경합니다.
색상의 음영을 어떻게 생성합니까?
기본 색상을 입력한 다음 색상이 점점 더 많은 양의 검정색과 혼합되는 음영 열을 읽습니다. 각 행은 짝수 단계에서 원본의 어두운 버전이며,HEX, RGB 또는 HSL 로 복사할 수 있습니다. 더 부드러운 범위의 어두운 값을 위해 단계 수를 늘립니다.
밝은 색과 어두운 색은 어떻게 계산되나요?
각 눈금은 표적을 향한 기본 색상의 선형 혼합입니다. 색조는 흰색 (255,255, 255) 을 향해 혼합되고,음영은 검정색 (0,0, 0) 을 향해 혼합되며,음색은 중간 회색 (128,128, 128) 을 향해 혼합됩니다. 예를 들어 30% 색조는 각 빨간색,녹색 및 파란색 채널을 기본에서 흰색으로 30% 이동합니다.
어떤 색상 형식을 붙여넣을 수 있나요?
HEX 코드 (3 자리 또는 6 자리 숫자, 선행 해시 유무), rgb() 값, hsl() 값 또는 crimson 또는 steelblue와 같은 일반적인 CSS 색상 이름을 입력할 수 있습니다. 이 도구는 입력을 내부적으로 RGB로 변환하고 HEX, RGB 및 HSL의 모든 견본을 보고합니다.
몇 가지 음영을 생성할 수 있나요?
스케일당 2~20 단계 사이를 설정할 수 있습니다. 각 스케일에는 원래 기본 색상도 포함되어 있으므로 10 단계 설정은 기본에 10 개의 색조,10 개의 음영 및 10 개의 톤을 더한 값을 제공합니다. 더 적은 단계는 값 사이에 굵은 점프를 제공하는 반면 더 많은 단계는 미세한 그라데이션을 제공합니다.
이 도구로 단색 팔레트를 만들 수 있습니까?
예. 단색 팔레트는 다양한 수준의 밝기와 채도에서 하나의 색조를 사용하며,이는 색조,음영 및 톤이 정확히 생성하는 것입니다. 기본 브랜드 색상을 선택하고 배경에 색조를 사용하고 기본 요소에 대한 기본을 사용하며 텍스트 또는 호버 상태에 대한 음영을 사용합니다.
생성된 색상은 동일한 색조를 유지합니까?
색조와 음영은 색조를 거의 정확하게 유지합니다. 순수한 흰색이나 검정색과 혼합하면 색조가 아닌 가벼움이 바뀌기 때문입니다. 회색이 색 공간의 중앙에 위치하기 때문에 톤이 아주 약간 바뀔 수 있지만 실용적인 디자인 작업의 경우 전체 스케일은 동일한 색상의 한 제품군으로 읽혀집니다.
색조 생성기는 무료이며 비공개입니까?
예. 가입 및 제한없이 완전히 무료입니다. 모든 구문 분석 및 색상 수학은 클라이언트 측 JavaScript 를 사용하여 브라우저에서 실행되므로 입력 한 색상은 결코 장치를 떠나지 않으며 도구가 페이지가로드되면 오프라인으로 계속 작동합니다.
