:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}
Color Palette Generator 는 컬러 휠 조화 규칙을 사용하여 단일 기본 색상을 조화로운 색상 세트로 바꿉니다. 시작 색상을 선택하고 모드 - 음영 및 색조,단색, 보색,유사, 삼극 또는 사극 -을 선택하고 도구는 각 견본에 대한 HEX,RGB 및 HSL 값으로 균형 잡힌 팔레트를 계산합니다.
좋은 색상 조합은 HSL 색상환에서 예측 가능한 관계를 따릅니다. 보색은 서로 반대 방향에 있고, 유사한 색상은 서로 옆에 위치하며, 3색은 균등한 간격을 두고 있습니다. 이것을 손으로 계산하면 색조 각도와 가벼움 값을 저글링하는 것을 의미합니다. 이 도구는 수학을 즉시 수행하고 결과를 표시하므로 작동하는 구성표를 선택할 수 있습니다.
모든 것이 브라우저에서 실행됩니다. 기본 색상, 전환 모드를 조정하고, 해당 값을 복사하려면 견본을 클릭하거나 전체 팔레트를 CSS 사용자 특성으로 내보냅니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.
조화 모드는 색상-바퀴 관계에서 비롯되며 원 주위의 고정된 양만큼 색조를 회전합니다: 보완의 경우 180도, 삼극의 경우 120도, 유사의 경우 작은 단계. 수학은 편리하고 지각적으로 균일하지 않은 HSL에서 수행됩니다. HSL 가벼움은 노란색과 파란색을 동일한 값으로 동일하게 가볍게 취급하며 눈에는 그렇지 않습니다. 이것이 바로 삼극 세트가 종이에서는 균형 잡힌 것처럼 보이고 화면에서는 불균형해 보일 수 있는 이유입니다. 숫자를 신뢰하기보다는 대비 검사기에 대해 텍스트에 사용하려는 팔레트를 확인하십시오. 색조와 색조는 색조와 채도를 유지하면서 가벼움을 이동함으로써 생성되며, 이는 가족을 인식할 수 있는 관련성을 유지하고 CSS 변수 세트로 유용하게 만듭니다.
색상 선택기를 사용하거나 16진수 값을 입력하여 팔레트가 만들어지는 색상을 설정합니다.
음영과 색조 사이를 전환하고 단색, 상보, 유사, 삼중 및 사정을 전환하여 다양한 조정된 체계를 확인합니다.
각 견본은 16진수, RGB 및 HSL 값을 표시합니다. 견본을 클릭하여 복사하거나 전체 팔레트를 CSS 사용자 정의 속성으로 복사합니다.
디자인 또는 스타일시트에서 배경, 악센트 및 텍스트에 생성된 색상을 사용하여 UI 전체에서 하모니를 일관되게 유지합니다.
쉐이드와 틴트, 단색, 보완, 유사, 트라이아딕 및 테트라딕 방식은 모든 일반적인 색상 관계를 포괄합니다.
모든 견본에는 세 가지 형식이 모두 표시되므로 올바른 값을 CSS, 디자인 도구 또는 코드에 바로 떨어뜨릴 수 있습니다.
전체 팔레트를 :root 사용자 정의 속성으로 내보내기, 디자인 토큰 스케일로 스타일시트에 붙여넣기 준비
하모니는 HSL로 계산되므로 색조는 간격을 균일하게 유지하고 가벼움 단계는 진흙 투성이가 아닌 균형을 유지합니다.
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Pick colors and convert between HEX, RGB, and HSL formats
Generate tints, shades, and tones from any base color
0 comments
No comments yet. Be the first to share your thoughts!