Red Hat 색상 팔레트는 각각 7개의 개별 색상과 흰색, 검은색, 회색을 포함하는 10개의 색상군으로 구성됩니다. 색상군은 사용 방법에 따라 핵심 색상, 2차 색상, 보조 색상이라는 세 가지 하위 색상 팔레트로 구성됩니다.

개별 색상은 10부터 시작하여 밝은 색부터 어두운 색까지 숫자가 붙습니다. 같은 숫자를 공유하는 다른 계열의 색상은 채도와 값이 비슷하므로 시각적인 강렬함이 비슷합니다.

Red Hat 핵심 색상은 Red Hat 브랜드와 가장 밀접한 관련이 있으며 Red Hat 로고에도 사용된 빨간색, 검은색, 흰색입니다. 어디에서 시작해야 할지 모르겠다면 항상 Red Hat 핵심 색상에서 시작하세요.

Red Hat 브랜드의 기본 색상은 red-50으로, Red Hat 레드라고도 알려져 있습니다. 몇몇 예외적인 상황을 제외하고는 Red Hat의 모든 시각적 요소에 red-50을 사용하여 브랜드와의 관련성을 유지해야 합니다.

Red Hat의 시각적 요소와 인터페이스에는 다른 콘텐츠가 돋보일 수 있도록 배경에 검은색, 흰색, 회색도 많이 사용됩니다. 검은색과 흰색 중간에 있는 10가지의 회색으로는 농도와 그림자, 사용자 인터페이스의 라이트 모드와 다크 모드를 유연하게 표현할 수 있습니다.

여백 활용

고유한 브랜드 개성에 맞게 Red Hat의 디자인 언어는 개방적이고 자유로운 레이아웃을 강조합니다. 시각적 요소에 사용된 색상이 무엇이든 여백을 우선시합니다. 단순하고 정돈된 레이아웃은 보는 사람의 시선을 중요한 내용에 집중시킵니다.

신중한 빨간색 사용

빨간색은 강렬한 색상입니다. 넓은 영역을 채우기보다는 중요한 부분에 Red Hat 레드로 포인트를 주어 핵심 내용에 이목이 쏠리도록 하세요.

중요한 경고나 오류 메시지에 주의를 환기시켜야 할 때는 Red Hat 레드가 아닌 danger 주황색을 사용하세요. 아래에서 상태 색상에 대해 자세히 알아보세요.

색조의 밝기를 조절하여 강조 효과 부여

빨간색, 검은색, 흰색의 색조 밝기를 조절하면서 강조 효과를 부여하고 그림자와 하이라이트를 만들거나 배경처럼 넓은 공간을 채우세요. 그러면 Red Hat 레드가 돋보입니다.

중립적 색상의 배경에 충분한 여백을 유지하세요.

red-50으로 중요한 요소를 강조하면 보는 사람의 시선을 끌 수 있습니다.

시각적 요소를 red-50만으로 채우지 마세요. 빨간색은 강렬합니다. Red Hat 레드로 여백을 다 채우지 말고 중립적인 색상의 배경을 사용해 보세요.

시각적 요소의 빨간색을 Red Hat 레드보다 밝거나 어두운 빨간색으로만 채우지 마세요. 항상 Red Hat 레드를 같이 사용하세요.

디자인의 모든 구성 요소에 red-50을 사용하지는 마세요. 모든 것을 강조하면 아무것도 눈에 들어오지 않습니다.

핵심 색상은 가장 눈에 잘 띄는 색상인데, 때로는 다른 색상을 사용해야 하는 상황이 있습니다. 2차 색상 팔레트에는 주황색, 노란색, 청록색, 파란색, 보라색이라는 5가지 색상군이 포함되어 있습니다.

제대로 된 Red Hat의 시각적 요소라면 색상이 절제되고 양식화된 느낌을 주어야 합니다. 이를 통해 시각적 요소를 간소화하면서도 Red Hat의 빨간색이 돋보이게 합니다. 프로젝트에서는 항상 핵심 색상과 함께 사용할 2차 색상군을 2개 이하로 선택하세요.

2차 색상을 선택할 때 어디서부터 시작해야 할지 잘 모르겠다면 색상 컬렉션 중 하나를 사용해 보세요. 이 컬렉션에서 함께 사용되는 색상군은 상호 보완적이며, 함께 사용했을 때 Red Hat 브랜드의 느낌을 잘 연출합니다.

시각적 요소에 최대 2개의 2차 색상군을 사용할 수 있습니다. 이 삽화는 빨간색, 주황색, 보라색을 사용했습니다.

2차 색상군을 3가지 이상 사용하지 마세요. 너무 산만합니다.

Red Hat 로고가 있더라도 항상 Red Hat 브랜드와의 관련성을 나타낼 수 있도록 시각적 요소에 red-50을 강조 색상으로 포함하세요.

2차 색상만 사용하여 Red Hat 자산을 만들지 마세요.

시각적 요소 전반에 밝은 색상과 어두운 색상을 혼합하여 차별화하세요. 이 그래프에서는 red-50, blue-70, orange-30을 사용하였습니다.

하나의 시각적 요소에 동일한 채도의 색상을 너무 많이 사용하지 않도록 하세요. 각 색상이 충돌하며 체계가 없어집니다.

배경에는 강렬한 색상의 비율을 줄여서 가장 중요한 부분이 시각적으로 돋보일 수 있게 하세요.

지나치게 짙은 색상을 배경으로 사용하지 마세요. 과도한 느낌을 줄 수 있습니다.

기본 색상과 2차 색상 외에도 필요할 때 더욱 구체적으로 표현할 수 있는 2가지 보조 색상 팔레트가 있습니다. 이러한 색상은 2차 색상으로가 아닌 본래 용도로만 사용해야 합니다.

사람 팔레트

Red Hat의 목표는 항상 실제 사람을 있는 그대로 정확하게 표현하는 것입니다. 이를 위해 삽화의 나머지 부분에 사용된 색상 팔레트에 관계없이 사실적인 피부 톤을 사용합니다. 사람 삽화에 대해 자세히 알아보세요.

삽화에 등장하는 사람마다 1개의 피부 톤 계열을 선택합니다. 피부 톤 계열은 기존 색상과 다르게 표현합니다. 쿨 톤은 분홍색에 가깝고, 웜 톤은 노란색과 갈색에 가깝습니다.

삽화에서 사람 팔레트 색상은 사람 피부 톤에만 사용하세요.

사람 색상 팔레트의 색상을 다른 용도로 사용하지 마세요.

각 인물에게 쿨 톤이나 웜 톤 중 하나를 사용합니다.

같은 인물에 쿨 톤과 웜 톤을 혼용하지 마세요.

상태 팔레트

시각적 요소에서 위험이나 성공에 주의를 환기시켜야 할 때는 상태 색상을 사용합니다. 이러한 색상은 인터페이스에서 가장 흔히 사용되지만 필요한 경우 다른 용도로도 사용할 수 있습니다. danger는 오류나 기타 문제가 발생했음을 나타낼 때만 사용해야 합니다. success는 작업이 올바르게 완료되었음을 나타낼 때 사용해야 합니다.

참고: success는 DEI 커뮤니티나 지속 가능성에 관한 디자인처럼 디자인에 녹색이 절대적으로 필요한 일부 상황에서 사용할 수 있습니다.

상태 팔레트의 색상은 오류나 성공 등 중요한 정보를 나타내는 데에만 사용하세요.

상태 팔레트의 색상을 시각적 요소의 다른 부분에 사용하지 마세요.

상태 색상을 주의를 끌기 위한 강조로 사용합니다.

상태 색상을 시각적 요소의 주 색상이나 배경으로 사용하지 마세요.

Red Hat은 포용적인 환경과 경험을 만드는 것을 핵심 원칙으로 하고 있습니다. 포용성에 중점을 둔다는 것은 프레젠테이션 슬라이드, 문서, 웹 페이지, 제품 인터페이스, 소셜 미디어 게시물 등 모든 Red Hat 자산에 모든 사람이 액세스할 수 있게 한다는 것입니다.

색상은 접근성에서 중요한 역할을 하며, 다양한 시력을 가진 이들이 정보를 인식하고 이해하는 방식에 영향을 미칩니다. 따라서 작업물에 색상을 적용하는 방법을 세심하게 결정해야 합니다.

대비는 전경색과 배경색 사이에서 인식되는 밝기 차이의 비율로 측정됩니다. 대비가 낮으면 특히 시력이 낮은 이들이 내용을 읽거나 인식하기 어려울 수 있습니다. 콘텐츠를 이해하는 데 중요한 정보를 전달하는 시각 자료는 WCAG(웹 콘텐츠 접근성 가이드라인) AA 표준 대비 비율을 충족해야 합니다.

즉, Red Hat 자산에서 작은 텍스트(17pt 이하)의 대비 비율은 최소 4.5:1이어야 합니다. 큰 텍스트(18pt 이상)와 정보성 그래픽(예: 아이콘)은 최소 3:1의 대비 비율이 필요합니다.

Adobe Color와 같은 툴을 사용하여 색상의 대비 비율을 측정하고 WCAG에서 텍스트 및 기타 그래픽의 표준 대비 비율에 대해 자세히 알아보세요.

색맹이 있으면 대다수 사람들과는 약간 다르게 색의 차이를 인식합니다. 따라서 특히 그래프나 인터페이스에서 색상으로만 구분되는 그래픽을 구분하기 어려울 수 있습니다.

가장 흔한 색맹은 적록색 시력 결핍(녹색맹 또는 적색맹)과 청황색 시력 결핍(청색맹)입니다.

색에만 의존하여 의미를 전달하면 색맹인 사람들이 시각적 요소를 이해하지 못할 수 있습니다. 따라서 색상에 텍스트나 아이콘을 함께 사용하고 채도가 다양한 색상을 선택하여 사물을 구분하세요. Color Oracle과 같은 툴을 사용하여 시각적 요소가 색맹인 사람에게 어떻게 보이는지 시뮬레이션해보세요.

red-50은 black에서 색상 대비 표준을 충족합니다.

white는 teal-60에서 색상 대비 표준을 충족합니다.

red-50은 blue-10에서 색상 대비 표준을 충족합니다.

white는 purple-60에서 색상 대비 표준을 충족합니다.

red-50은 gray-80에서 색상 대비 표준을 충족하지 않습니다.

white는 teal-40에서 색상 대비 표준을 충족하지 않습니다.

red-50은 blue-70에서 색상 대비 표준을 충족하지 않습니다.

white는 purple-30에서 색상 대비 표준을 충족하지 않습니다.

Red Hat의 모든 자산과 디자인 시스템은 같은 색상 팔레트를 공유하지만, 일부는 특정 요구 사항을 충족하기 위해 색상을 다른 방식으로 적용합니다.

프레젠테이션에 사용하는 색상

프레젠테이션은 고객이나 파트너가 Red Hat 브랜드를 처음 접하는 자리일 수 있습니다. 프레젠테이션은 접근성 모범 사례를 따르고 Red Hat다운 분위기와 느낌이 묻어나야 합니다. Red Hat 프레젠테이션 템플릿에는 권장 색상 컬렉션이 포함되어 있습니다.

Red Hat 프레젠테이션 템플릿(Red Hat 자격 증명 필요)

삽화에 사용하는 색상

복잡한 기술을 시각화하거나 미묘한 뉘앙스가 담긴 아이디어를 묘사해야 할 때 삽화를 사용하세요. 빨간색이 강조 색상인 핵심 색상 팔레트를 사용하여 삽화에서 Red Hat의 느낌을 유지하고, 2차 색상을 더해 사례에 적합한 색조를 만들어낼 수 있습니다.

Red Hat 삽화 표준

사용자 환경에 사용되는 색상

Red Hat 웹 자산은 디자인 토큰을 통해 색상 팔레트를 적용하고 화면에 최적화된 보기 환경을 위해 웹 접근성 표준을 따릅니다.

ux.redhat.com 방문하기