📖 소개: 포괄적인 색상 처리 및 팔레트 생성 기능을 제공하는 전문 온라인 색상 도구입니다. 색상 변환기 , 팔레트 생성기 , 색상 대비 검사기 , 색상 분석 도구 등의 완벽한 통합.
HEX, RGB 및 HSL 색상 형식 간의 실시간 양방향 변환을 지원합니다. 어떤 형식이든 입력하여 다른 업데이트와 자동으로 업데이트를 동기화하여 색상 일관성을 보장하세요.
색상 이론을 기반으로 단색, 보색, 유사 및 삼원색 팔레트를 자동으로 생성하여 조화로운 색상 조합을 만드는 데 도움을 줍니다.
색상 대비가 WCAG 2.1 접근성 표준을 충족하는지 확인하여 웹 사이트 색상이 시각 장애가 있는 사용자를 포함한 모든 사용자에게 적합한지 확인합니다.
상대휘도, 인지된 밝기, 색상, 채도, 밝기 등 상세한 색상 특성 분석을 제공하여 색상 특성을 이해하는 데 도움을 줍니다.
색상 값(HEX, RGB, HSL)의 원클릭 복사를 지원합니다. 디자인 도구에서 쉽게 사용할 수 있도록 팔레트 색상을 개별적으로 복사할 수도 있습니다.
데스크톱, 태블릿, 모바일 등 다양한 기기 화면에 완벽하게 적응합니다. 소프트웨어를 설치하지 않고도 언제 어디서나 색상을 분석할 수 있습니다.
이 도구에서 사용하는 색상 표준 및 계산 방법:
기술 노트: 이 도구는 실시간 변환을 위해 JavaScript 색상 알고리즘을 사용합니다. 대비 계산은 WCAG 2.1 상대 휘도 공식(L = 0.2126×R + 0.7152×G + 0.0722×B)을 기반으로 합니다. 팔레트 생성은 색상환 수학적 계산인 보색(180° 색상 차이), 유사(30° 색상 차이), 삼원(120° 색상 차이)을 기반으로 합니다.
WCAG(웹 콘텐츠 접근성 지침)는 웹 콘텐츠 접근성 지침입니다. 색상 대비 표준은 텍스트와 배경 사이의 충분한 대비를 보장하므로 시각 장애가 있는 사용자도 명확하게 읽을 수 있습니다. WCAG 2.1에 따르면 일반 텍스트에는 최소 4.5:1 대비가 필요하고, 큰 텍스트(최소 18pt 또는 14pt 굵은 글씨)에는 최소 3:1이 필요합니다. 이러한 표준을 충족하지 않으면 일부 사용자는 웹 사이트를 사용할 수 없게 될 수 있으며 일부 지역에서는 접근성 법률을 위반할 수 있습니다.
각 형식에는
의 특성이 있습니다.
1) HEX(16진수): 예: 웹 개발에서 가장 일반적으로 사용되는 #4A90E2, 간결하지만 색상 속성을 이해하기에는 덜 직관적입니다
2) RGB(빨간색 녹색 파란색): 예: rgb(74, 144, 226), 빛의 기본 색상을 기반으로 직관적이지만 색상 특성을 조정하는 데 불편함
3) HSL(색조 채도 밝기): 예: hsl(212, 72%, 59%), 인간의 색상 인식을 기반으로 색상 특성 조정이 용이함(밝기, 어두움, 채도 조정 등)
ColorLab은 이 세 가지 형식 간의 실시간 변환을 지원합니다. 필요에 따라 가장 편리한 형식을 사용할 수 있습니다.
ColorLab은 색상 이론을 기반으로 4가지 유형의 팔레트를 생성합니다:
1) 단색 팔레트: 색상을 일정하게 유지하고 채도와 밝기를 조정하여 더 밝거나 어두운 변형을 만듭니다
2) 보완 팔레트: 색상환의 반대 색상(180° 색조 차이)을 사용하여 고대비 조합을 만듭니다
3) 유사 팔레트: 색상환에서 인접한 색상(30° 색조 차이)을 사용하여 조화롭고 미묘한 조합을 만듭니다
4) 삼원색 팔레트: 색상환에서 동일한 간격의 세 가지 색상을 사용하여(120° 색조 차이) 생동감 있고 다채로운 조합을 만듭니다
이 팔레트는 조화로운 색상 조합을 보장하기 위해 수학적으로 계산됩니다.
상대 휘도는 인간의 시각적 인식을 기반으로 한 밝기 값으로 0(순수한 검정색)부터 1(순백색)까지입니다. 계산 공식은 다양한 색상에 대한 인간의 눈의 민감도를 고려합니다(녹색에 가장 민감하고 파란색에 가장 민감하지 않음). 인지된 밝기는 "매우 어두움", "어두움", "중간", "밝음", "매우 밝음"과 같은 상대적 휘도 분류를 기반으로 한 직관적인 설명입니다. 상대 휘도는 색상 대비를 계산하는 데 사용되는 반면 인지된 밝기는 색상의 시각적 무게와 적합한 적용을 이해하는 데 도움이 됩니다.
접근 가능한 색상 선택에 대한 권장 사항:
1) ColorLab을 사용하여 대비를 확인하고 텍스트와 배경 대비가 ≥4.5:1
인지 확인하세요.
2) 정보를 전달하기 위해 색상에만 의존하지 말고(예: 오류는 빨간색) 텍스트나 아이콘도 사용하세요
3) 색맹 사용자 관점에서 테스트하여 색상 차별화가 색조 차이에만 의존하지 않는지 확인합니다
4) 밝은 환경에서도 선명한 식별이 가능하도록 충분한 색상 대비를 제공합니다
5) 다크 모드에서의 색상 성능을 고려하고 다양한 테마에 걸쳐 좋은 대비를 보장합니다
예, ColorLab 색상 도구는 완전 무료 온라인 도구입니다. 등록이나 로그인이 필요하지 않습니다. 우리는 디자이너와 개발자를 위한 고품질 색상 도구를 제공하여 아름답고 접근하기 쉬운 색상 구성표를 만드는 데 도움을 주기 위해 최선을 다하고 있습니다. 모든 처리는 귀하의 브라우저에서 로컬로 이루어지며 귀하의 색상 데이터는 어떤 서버에도 업로드되지 않습니다.