색상을 선택하고 다양한 상태에 대한 음영을 결정하는 방법(호버, 활성, 누르기, 비활성화)

인터페이스 색상을 선택하는 프로세스는 특히 다양한 버튼 상태, 글꼴 및 기타 UI 요소를 고려할 때 복잡할 수 있습니다. 이 글에서는 프로젝트에 맞는 색 구성표를 성공적으로 선택하는 데 도움이 되는 방법과 원칙을 공유하겠습니다.

1. 기본 색상 정의

웹사이트를 디자인할 때 색상 구성표를 선택해야 하는 경우가 많습니다. 때로는 고객이 이미 기본 브랜드 색상을 갖고 있는 경우도 있습니다. 이 경우 기본 색상을 보완할 추가 색상과 음영을 선택해야 합니다. 기본 색상 외에도 오류 상태, 링크, 일러스트레이션, 아이콘 표시, 그래픽 및 대시보드 사용 등 다양한 목적으로 사이트에서 추가 색상이 사용됩니다.

2. 색상 조화 활용

색상의 조화를 잘 이루려면 단색, 보색, 삼각형 등 다양한 색상 조화 방식을 사용하는 것이 좋습니다. 프로젝트의 기본 색상을 보완하는 조화로운 색상 팔레트를 만드는 데 도움이 될 수 있습니다. 현재 우리는 기술이 빠르게 발전하는 세상에 살고 있으며, 쉽게 색 구성표를 생성하는 특별한 서비스가 있습니다. 예를 들어 color.adobe.com을 사용합니다.

내가하는 방법은 다음과 같습니다.

하나. 드롭다운 목록에서 원하는 구성표를 선택합니다.

둘. 기본 색상으로 표시된 필드에 필요한 색상 값을 입력합니다.

삼. 내 필요에 맞는 색상을 결정하십시오.

4개. 내 경우에는 Figma를 사용하여 작업 공간으로 전송합니다.

3. 톤 선택

다음으로 선택한 각 색상의 음영을 결정해야 합니다. 선택한 색상의 색조를 선택하려면 이 과정에 도움이 되는 특정 서비스를 이용할 수 있습니다. 색상의 음영을 결정하는 방법에는 두 가지가 있습니다.

첫 번째 방법은 더 복잡한 공식을 사용합니다.

1. 헤더 색상을 선택하세요(반드시 검은색일 필요는 없음).
2. HLS 모드로 전환합니다.
3. 첫 번째 셀을 건너뛰고 두 번째 셀의 값을 2만큼 줄이고 세 번째 셀의 값을 5만큼 늘립니다.

두 번째 방법은 서비스를 이용하는 것입니다(쉽고 빠르게)

colors.dopely.top

하나. 원하는 색상의 값을 입력하세요.

둘. 색상과 단계 수를 선택합니다(저는 5개를 사용했습니다).

삼. 색조와 단계 수를 선택합니다.

4개 . 결과적으로 한 가지 색상에 대해 다음과 같은 표를 만들었습니다.

P = 기본,

P 60 = 이것이 우리의 기본 색상입니다.

P 10부터 P 50까지 = 이것은 우리가 Tints에서 수집한 밝은 톤입니다.

P 60에서 P 100까지 = 이것은 우리가 음영 패널에서 수집한 어두운 음영입니다.

4. 색상 접근성 확인하기

제한된 능력을 가진 사용자를 포함하여 모든 사용자가 선택한 색상에 접근할 수 있도록 하는 것이 중요합니다. 인터페이스를 만들 때 따를 수 있는 WCAG (웹 콘텐츠 접근성 지침)와 같은 지침이 있습니다. 색상의 접근성을 확인하려면 선택한 색상의 대비와 접근성을 확인하는 플러그인이나 웹 서비스와 같은 특정 도구를 사용할 수 있습니다.

Figma 플러그인 – 대비

웹 서비스 – 냉각기

5. 다양한 인터페이스 상태에 대한 색상 정의

웹 프로젝트의 색상 팔레트를 디자인하는 마지막 단계에서는 특정 요소 상태에 필요한 단계 수를 결정해야 합니다. 일반적으로 우리는 네 가지 주요 상태를 식별합니다.

• 활성화됨(요소의 차분하고 정상적인 상태)
• 호버(마우스오버)
• 활성(버튼이나 다른 컨트롤 클릭)
• 비활성화됨(차단된 요소)

단계 수를 결정하기 위해 기본 색상 값(프라임)을 고정하는 색상 패널을 사용합니다. 그런 다음 호버 및 활성 상태의 단계 수를 계산합니다. 그런 다음 버튼과 버튼 안의 텍스트를 쉽게 읽을 수 있도록 다양한 접근성 상태를 테스트합니다.

예를 들어, IBM 지침에서는 다음 접근 방식을 설명합니다. 호버 상태는 초기 색상에서 1.5단계이고 활성 상태는 기본 색상에서 2단계입니다. 마찬가지로 선택한 상태는 기본 색상에서 한 단계 더 나아갑니다. 이 방법을 사용하면 색상 팔레트를 정의하고 능력이 제한된 사용자를 포함하여 광범위한 사용자가 접근성을 보장할 수 있습니다. 호버 및 활성 상태가 식별되는 텍스트에도 동일한 접근 방식이 적용됩니다.

호버 상태

기본 색상이 검정색과 70 사이 인 경우 밝은 색상으로 반 단계 올라가야 합니다.

기본 색상이 60에서 흰색 사이 인 경우 더 어두운 톤으로 반 단계 낮추어야 합니다.

언론/활성 상태

100에서 70 사이 의 값에서는 활성 상태가 두 단계 더 가벼워집니다.

60에서 10 사이의 값에서는 활성 상태가 두 단계 더 어두워집니다.

선택된 상태

100에서 70 사이의 값의 경우 선택한 상태가 한 단계 가벼워집니다.

60에서 10 사이의 값에서는 선택한 상태가 한 단계 어두워집니다.

디자인과 텍스트를 테스트하여 읽기 쉽고 올바르게 표시되는지 확인하는 것도 중요합니다. 작업을 완료한 후 다양한 인터페이스 상태와 텍스트가 제대로 보이고 작동하는지 확인하세요.

색상 구성표를 올바르게 선택하는 것은 사용자 친화적이고 매력적인 사용자 인터페이스를 만드는 데 중요한 역할을 합니다. 이러한 간단한 단계를 따르고 사용 가능한 도구를 사용하면 프로젝트에 맞는 색상을 선택하고 최적화할 수 있습니다.

당신이 내 기사를 즐겼기를 바랍니다. 질문이 있으시거나 추가 정보가 필요하시면 언제든지 댓글을 남겨주세요.