Red Hat Summit색상
색상은 시각적인 요소 그 이상입니다. 색상은 고객이 Red Hat 메시지의 어조와 관계성을 인식하는 방식에 영향을 미칩니다. 레드를 중심으로 한 Red Hat의 색상 팔레트는 실용성과 브랜드 개성을 조화시켜 보는 사람이 Red Hat과 소통하고 싶은 마음이 들도록 유도합니다.
특별한 레드
모든 브랜드가 고유한 브랜드 색상을 갖고 있지만, 핵심 정체성에서 분리할 수 없는 색상을 가진 브랜드는 많지 않습니다. 빨간색은 창립 당시부터 지금까지 Red Hat의 스토리에서 핵심적인 역할을 해 왔으며, 협업과 나눔에 대한 Red Hat의 열정을 표현합니다.
Red Hat 레드는 파란색이나 녹색이 섞이지 않은 순수한 빨간색입니다.
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
Red Hat 레드(red-50)은 단번에 시선을 사로잡기 때문에 현명하게 사용해야 합니다. 강렬한 빨간색은 Red Hat 브랜드의 정체성을 나타내며 중요한 내용을 과하지 않게 강조합니다.
핵심 색상
Red Hat은 Red Hat의 콘텐츠임을 한눈에 알아볼 수 있도록 하기 위해 핵심 색상을 사용합니다. 그것은 Red Hat 로고에 사용되고 브랜드와 가장 밀접하게 관련된 색상을 말합니다. 레드 색조와 중간 톤의 회색을 사용하여 깊이감과 음영을 유연하게 표현할 수 있습니다.
2차 색상
2차 팔레트는 Red Hat 레드와 충돌하지 않으면서 에너지를 더하고 보완해 줍니다. Red Hat 레드와 함께 1~2개의 2차 색상을 사용하여 영향력을 높이세요.
그라데이션
깊이감과 역동성을 더하기 위해 배경색과 액센트 색상에 은은한 그라데이션을 사용합니다. 그라데이션은 구성의 주요 초점이 되어서는 안 되며, 더 눈에 띄는 것이 아니라 핵심 요소를 보완해야 합니다.
Red Hat이 색상을 사용하는 방식
Red Hat의 정체성을 표현하려면 팔레트의 색상을 사용하는 것만으로는 부족합니다. 사용하는 각 색상의 면적과 위치도 중요하게 고려해야 합니다. 다음 핵심 원칙에 따라 색상을 일관성 있게 사용하세요.
간결성
절제되고 양식화된 색상을 사용하세요. 간결함을 유지하고 충분한 여백을 두어 메시지를 강조하고 보는 사람이 중요한 부분에 집중할 수 있게 하세요.
용도에 맞게 빨간색을 사용하세요
Red Hat 레드는 강렬한 색상입니다. 공간 전체를 가득 채우는 대신 구성에서 핵심 요소를 강조하는 데 사용하세요.
균형 찾기
큰 물체와 배경은 가장 옅은 색조, 가장 짙은 색조, 은은한 그라데이션으로 채우세요. 채도가 가장 높은 색은 무언가를 강조하거나, 탐색을 돕거나, 역동성을 더하기 위한 용도로 조금만 사용하세요.
색상 소스 고려
멀리 떨어져서 구성을 이루는 모든 요소의 색상을 주의 깊게 살펴보세요. 각 색상이 어떻게 어우러지는지, 시선이 어디를 향하게 되는지 고려하세요.
색상 컬렉션
서로 어울리는 색상을 더 쉽게 선택할 수 있도록 다양한 방식으로 여러 팔레트의 색상을 결합하는 색상 컬렉션을 개발했습니다. 모든 프로젝트에서 이러한 컬렉션 중 하나로 시작하세요.
피해야 할 사항
Red Hat 색상 팔레트 이외의 색상을 사용하지 않도록 하세요.
모든 요소에 Red Hat 레드(red-50)를 적용하지 마세요. 빨간색은 강렬한 색상입니다. 특정 요소를 강조하는 용도로 사용하세요.
하나의 시각적 요소에 2차 색상을 3개 이상 사용하지 마세요. 색상 수가 적을수록 효과적입니다.
Red Hat 레드(red-50)를 사용하는 것을 잊지 마세요. Red Hat의 모든 콘텐츠에 red-50을 포함해야 합니다.
접근성이 낮은 색상을 사용하지 않도록 하세요. 항상 텍스트 및 다른 요소와 배경색이 이루는 대비 정도를 확인하세요.
과도한 그라데이션 사용을 피하세요. 그라데이션은 색상에 미묘한 깊이감과 역동성을 더하기 위한 용도로 사용하세요.
보조 색상
기본 색상과 2차 색상 외에도 필요할 때 사용할 수 있는 2가지 보조 색상 팔레트가 있습니다. 이러한 색상은 2차 색상으로가 아닌 본래 용도로만 사용해야 합니다.
정보 팔레트
정보 팔레트는 상태와 상호작용에 사용됩니다. 이러한 색상은 장식적인 용도가 아니라 기능적인 용도로 사용됩니다. 인터페이스, 웹 페이지, 그래프 및 다이어그램, 보고서, 기타 정보를 제공하는 시각적 요소에 정보 팔레트를 사용하세요.
사람 팔레트
Red Hat의 목표는 항상 실제 사람을 있는 그대로 표현하는 것입니다. 이러한 색상은 삽화로 표현된 사람의 피부 톤으로만 사용해야 합니다. 삽화에 등장하는 사람마다 1개의 피부 톤 계열을 선택합니다.사람 삽화에 대해 자세히 알아보세요.
색상을 통한 맥락 제공
색상을 통해 메시지 또는 데이터 포인트를 빠르게 전달할 수 있습니다. Red Hat은 사용자 인터페이스와 슬라이드 데크, 인포그래픽 및 다이어그램에서 누구나 쉽게 의미를 떠올릴 수 있는 색상을 활용하여 고객 여정 전반에서 일관성을 제공합니다.
| 색상 | 연상 | 자세한 내용 |
| Red Hat | 레드는 Red Hat의 브랜드 색상입니다. 부정적인 것을 나타내는 데 레드를 사용하지 않도록 하세요. | |
| 위험, 감소 | 치명적인 오류 또는 가치 감소와 같은 부정적인 일이 발생한 경우. | |
| 주의 | 치명적이지 않은 액션 또는 오류가 발생한 경우. | |
| 경고 | 치명적인 액션 또는 오류를 방지하기 위해 즉각 조치를 취해야 하는 경우. | |
| 성공, 증가 | 성공적인 액션 또는 가치 증가와 같이 긍정적인 일이 발생한 경우. | |
| 링크 또는 상호작용 | 클릭하면 하이퍼링크로 연결되거나 상태가 변경되는 오브젝트 또는 텍스트. | |
| 정보 또는 유용한 팁 | 유용한 정보를 사용할 수 있는 경우. | |
| 중간 | 사용할 수 없거나 중요하지 않은 버튼 또는 정보. |
색상 견본
Red Hat 색상 팔레트는 11개의 색상 계열로 구성됩니다. 개별 색상은 10부터 시작하여 밝은 색부터 어두운 색까지 숫자가 붙습니다. 같은 숫자를 공유하는 다른 계열의 색상은 채도와 값이 비슷하며 시각적인 강렬함이 비슷합니다.
아래의 색상 견본을 클릭하여 클립보드에 6자리 코드를 복사하거나 견본 파일을 다운로드하세요.
Red Hat 브랜드 색상
다음은 Red Hat 브랜드를 나타내고 브랜드의 인지도를 구축하기 위해 사용되는 색상입니다.
핵심 색상 팔레트
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(Red Hat 레드)
#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
흰색
#ffffff
RGB 255 255 255
CMYK 0 0 0 0
Pantone 화이트
gray-10
#f2f2f2
gray-20
#e0e0e0
gray-30
#c7c7c7
gray-40
#a3a3a3
gray-50
#707070
gray-60
#4d4d4d
gray-70
#383838
gray-80
#292929
gray-90
#1f1f1f
gray-95
(ux 블랙)
#151515
블랙
#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone 블랙 C
2차 팔레트
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
#4d1f00
yellow-10
#fff4cc
yellow-20
#ffe072
yellow-30
#ffcc17
RGB 248 204 23
CMYK 0 15 100 0
Pantone 108C
yellow-40
#dca614
yellow-50
#b98412
yellow-60
#96640f
yellow-70
#73480b
yellow-80
#54330b
teal-10
#daf2f2
teal-20
#b9e5e5
teal-30
#9ad8d8
teal-40
#63bdbd
teal-50
#37a3a3
RGB 55 163 163
CMYK 80 10 30 10
Pantone 2234C
teal-60
#147878
teal-70
#004d4d
teal-80
#003333
purple-10
#ece6ff
purple-20
#d0c5f4
purple-30
#b6a6e9
purple-40
#876fd4
purple-50
#5e40be
RGB 94 64 190
CMYK 85 80 0 0
Pantone 2097C
purple-60
#3d2785
purple-70
#21134d
#1b0d33
보조 색상
정보 팔레트
이러한 색상은 기능적입니다. 따라서 장식적인 용도가 아니라 본래 용도로 사용해야 합니다.
success-green-10
#e9f7df
success-green-20
#d1f1bb
success-green-30
#afdc8f
success-green-40
#87bb62
success-green-50
#63993d
RGB 99 153 61
CMYK 70 0 100 10
Pantone 7737C
success-green-60
#3d7317
success-green-70
#204d00
danger-orange-10
#ffe3d9
danger-orange-20
#fbbea8
danger-orange-30
#f89b78
danger-orange-40
#f4784a
danger-orange-50
#f0561d
RGB 240 86 29
CMYK 0 83 100 0
Pantone 165C
danger-orange-60
#b1380b
danger-orange-70
#731f00
interaction-blue-10
#e0f0ff
interaction-blue-20
#b9dafc
interaction-blue-30
#92c5f9
interaction-blue-40
#4394e5
interaction-blue-50
#0066cc
RGB 0 102 204
CMYK 85 55 0 5
Pantone 2387C
interaction-blue-60
#004d99
interaction-blue-70
#003366
사람 팔레트
피부 톤 계열은 기존 색상과 다르게 표현합니다. 쿨톤은 분홍색 계열 색상이고, 웜톤은 노란색 및 갈색 계열 색상입니다.사람 삽화에 대해 자세히 알아보세요.
cool-tone-10
#ffe3dc
cool-tone-20
#f7c8bb
cool-tone-30
#e8a997
cool-tone-40
#ce8873
cool-tone-50
#a66552
cool-tone-60
#724335
cool-tone-70
#40251d
warm-tone-10
#ffe9dc
warm-tone-20
#f9d5c0
warm-tone-30
#edbea1
warm-tone-40
#d8a381
warm-tone-50
#b88564
warm-tone-60
#8e6549
warm-tone-70
#664934
접근성
모두에게 열려 있고 모두를 지원한다는 것은 공평하고 포용적인 경험을 제공하는 것을 의미합니다. 모든 사람이 프레젠테이션 슬라이드, 웹 페이지, 제품 인터페이스, 소셜 미디어 게시물 등 모든 Red Hat 자산에 접근할 수 있어야 합니다.
색상은 접근성에서 중요한 역할을 하며, 다양한 시력을 가진 이들이 정보를 인식하고 이해하는 방식에 영향을 미칩니다. 따라서 작업물에 색상을 적용하는 방법을 신중하게 결정해야 합니다.
대비
대비는 전경색과 배경색 사이에서 인식되는 밝기 차이의 비율로 측정됩니다. 대비가 낮으면 특히 시력이 낮은 이들이 내용을 읽거나 인식하기 어려울 수 있습니다. 콘텐츠를 이해하는 데 중요한 정보를 전달하는 시각 자료는 WCAG(웹 콘텐츠 접근성 가이드라인, Web Content Accessibility Guidelines) AA 표준 대비 비율을 충족해야 합니다.
Red Hat 자산의 경우 작은 텍스트(17pt 이하)의 대비 비율은 최소 4.5:1이어야 합니다. 큰 텍스트(18pt 이상)와 정보성 그래픽(예: 아이콘)은 최소 3:1의 대비 비율이 필요합니다. Adobe Color 와 같은 툴을 사용하여 색상의 대비 비율을 측정하고 WCAG에서 텍스트 및 기타 그래픽의 표준 대비 비율에 대해 자세히 알아보세요.
red-50은 black에서 색상 대비 표준을 충족합니다.
white는 teal-60에서 색상 대비 표준을 충족합니다.
black은 red-10에서 색상 대비 표준을 충족합니다.
white는 purple-60에서 색상 대비 표준을 충족합니다.
red-50은 gray-80에서 색상 대비 표준을 충족하지 않습니다.
white는 teal-40에서 색상 대비 표준을 충족하지 않습니다.
black은 red-60에서 색상 대비 표준을 충족하지 않습니다.
white는 purple-30에서 색상 대비 표준을 충족하지 않습니다.
색맹
색맹인 사람들은 대부분의 사람들과 같은 방식으로 색상의 차이를 인식하지 못하기 때문에 특히 그래프 또는 인터페이스에서 색상만 단독으로 사용하여 구분된 정보를 이해하기가 어려울 수 있습니다. 가장 흔한 색맹은 적록색 시력 결핍(녹색맹 또는 적색맹)과 청황색 시력 결핍(청색맹)입니다.
색상으로만 의미를 전달하면 색맹인 사람들이 시각적 요소를 이해하지 못할 수 있습니다. 따라서 색상에 텍스트나 아이콘을 함께 사용하고 채도가 다양한 색상을 선택하여 구분할 수 있게 하세요. Color Oracle과 같은 툴을 사용하여 시각적 요소가 색맹인 사람에게 어떻게 보이는지 시뮬레이션해보세요.
색상과 함께 레이블을 사용하여 다이어그램, 차트, 인터페이스의 개별 섹션을 구분하세요.
색상만 단독으로 사용하지 않도록 하세요. 색맹인 사람들은 색상을 구분할 수 없어 정보를 식별하지 못할 수도 있습니다.
진동
채도가 강한 색상을 함께 사용하면 색 진동이 발생할 수 있어 시각적 요소의 가장자리가 반짝이면서 흐릿하게 보일 수 있습니다. 누구든지 이러한 색상을 보고 구분하기 어려울 수 있으며, 시력에 따라 불편감을 느끼는 사람이 있을 수도 있습니다.
밝은 색상과 채도가 낮은 중간 색상을 함께 사용하세요.
강도가 비슷한 색상을 같은 영역에 사용하는 것을 피하세요.
자세히 알아보기
디지털 디자인의 접근성 기본 사항
웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)
