Color Shades Generator 란 무엇입니까?
색상 음영 생성기는 하나의 기본 색상을 가져와 더 밝고 어두운 버전의 단색 스케일을 구축합니다. #4466EE 와 같은 단일 입력에서 흰색을 향해 단계 색조의 행을 생성,검은 색을 향해 단계 음영의 행,회색을 향해 단계 톤의 행을 생성한다. 각 견본은 HEX,RGB, 또는 HSL 로 복사하고 CSS,디자인 파일,또는 테마 구성에 바로 드롭 할 수있는 실제 색상입니다.
세 가지 스케일은 색상 이론에서 사용되는 고전적인 정의에서 비롯됩니다. 색조는 흰색과 혼합 된 기본 색상으로 동일한 색조를 유지하면서 밝기를 높입니다. 색조는 검정색과 혼합 된 베이스로 어두워집니다. 톤은 회색과 혼합 된 베이스로 강도를 줄이고 음소거되고보다 정교한 버전의 색상을 제공합니다. 하나의 입력에서 세 가지를 모두 갖는 것이 일관성있는 팔레트를 구축 할 수 있습니다: 버튼과 호버 상태,차트 시리즈 세트 또는 인터페이스의 밝고 어두운 표면,모두 단일 브랜드 색상에서 파생됩니다.
생성기는 브라우저에서 완전히 실행됩니다. 입력한 색상은 구문 분석되고 스케일은 클라이언트 측 JavaScript 로 계산되므로 아무 것도 업로드되지 않고 계정이 없으며 작업이 추적되지 않습니다. HEX,rgb(), hsl() 및 일반적인 CSS 색상 이름을 허용하고 각 스케일에 포함된 단계 수를 설정하고 모든 견본을 즉시 업데이트할 수 있습니다. 페이지가 로드되면 오프라인에서 작동합니다.
Color Shades Generator 를 사용하는 방법은 무엇입니까?
기본 색상을 입력합니다
일반적인 구문에 색상을 입력하거나 붙여넣기: #4466EE와 같은 HEX 코드, rgb() 또는 hsl() 값 또는 청록색과 같은 CSS 색상 이름.
단계 수를 설정합니다
각 눈금에 얼마나 많은 변형을 포함해야 하는지 선택합니다. 더 많은 단계를 거치면 베이스에서 흰색,검은색 또는 회색으로 갈수록 미세한 그라데이션이 제공됩니다.
색조, 음영 및 톤을 검토하십시오
이 도구는 세 개의 눈금을 나란히 표시하며 각 견본에는 HEX 값과 대상 색상에 혼합된 백분율이 표시되어 있습니다.
필요한 색상을 복사하십시오
모든 견본을 클릭하여 값을 복사합니다. 복사 형식을 HEX,RGB, HSL 간에 전환하여 프로젝트에서 기대하는 구문과 일치시킵니다.
주요 특징
색조, 음영 및 톤
하나의 기본 색상은 한 번에 세 개의 전체 스케일을 생성합니다: 밝은 색조, 어두운 색조, 회색을 향한 음소거 톤.
모든 값을 복사할 수 있습니다
각 견본은 HEX,RGB, HSL 로 제공되므로 CSS,디자인 도구 또는 테마 파일에 직접 붙여 넣을 수 있습니다.
조정 가능한 단계
스케일당 2~20 단계로 설정하여 기본 색상과 흰색, 검정색 또는 회색 사이의 그라데이션이 얼마나 미세한지 제어합니다.
용서하는 입력
3 자리 및 6 자리 HEX, rgb() 및 hsl() 값, 일반적인 CSS 색상 이름을 모두 동일한 견본으로 정규화합니다.
Frequently Asked Questions
Related Tools
Color Contrast Checker
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.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!