색상

색상은 시각적인 요소 그 이상입니다. 색상은 고객이 Red Hat 메시지의 어조와 관계성을 인식하는 방식에 영향을 미칩니다. 레드를 중심으로 한 Red Hat의 색상 팔레트는 실용성과 브랜드 개성을 조화시켜 보는 사람이 Red Hat과 소통하고 싶은 마음이 들도록 유도합니다.

How we use color

특별한 레드

모든 브랜드가 고유한 브랜드 색상을 갖고 있지만, 핵심 정체성에서 분리할 수 없는 색상을 가진 브랜드는 많지 않습니다. 빨간색은 창립 당시부터 지금까지 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 레드는 강렬한 색상입니다. 공간 전체를 가득 채우는 대신 구성에서 핵심 요소를 강조하는 데 사용하세요.

균형 찾기

큰 물체와 배경은 가장 옅은 색조, 가장 짙은 색조, 은은한 그라데이션으로 채우세요. 채도가 가장 높은 색은 무언가를 강조하거나, 탐색을 돕거나, 역동성을 더하기 위한 용도로 조금만 사용하세요.

색상 소스 고려

멀리 떨어져서 구성을 이루는 모든 요소의 색상을 주의 깊게 살펴보세요. 각 색상이 어떻게 어우러지는지, 시선이 어디를 향하게 되는지 고려하세요.

색상 컬렉션

서로 어울리는 색상을 더 쉽게 선택할 수 있도록 다양한 방식으로 여러 팔레트의 색상을 결합하는 색상 컬렉션을 개발했습니다. 모든 프로젝트에서 이러한 컬렉션 중 하나로 시작하세요.

Core light
코어 라이트 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 배경에는 gray-10 또는 흰색을 사용할 수 있습니다. 텍스트에는 검정색 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 모든 색조의 Red Hat 레드, 검정색, 흰색을 사용할 수 있습니다. 오른쪽의 4개 이미지는 익스프레시브 다크 색상 컬렉션 사용의 예시입니다.
Core dark
코어 다크 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 배경에는 검정색 또는 gray-80을 사용할 수 있습니다. 텍스트에는 흰색 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 모든 색조의 Red Hat 레드, 검정색, 흰색을 사용할 수 있습니다. 오른쪽의 4개 이미지는 코어 다크 색상 컬렉션 사용의 예시입니다.
Core red
코어 레드 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 배경에는 red-10 또는 흰색을 사용할 수 있습니다. 텍스트에는 검정색 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 모든 색조의 Red Hat 레드, 검정색, 흰색을 사용할 수 있습니다. 오른쪽의 5개 이미지는 코어 레드 색상 컬렉션 사용의 예시입니다.
Expressive light
익스프레시브 라이트 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 배경에는 gray-10, red-10 또는 흰색을 사용할 수 있습니다. 텍스트에는 검정색, purple-80 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 모든 색조의 Red Hat 레드, 보라색, 검정색, 흰색, 청록색, 주황색, 노란색을 사용할 수 있습니다. 오른쪽의 3개 이미지는 익스프레시브 다크 색상 컬렉션 사용의 예시입니다.
Expressive dark
익스프레시브 다크 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 배경에는 검정색 또는 purple-80을 사용할 수 있습니다. 텍스트에는 흰색 또는 빨간색을 사용할 수 있습니다. 그 외 그래픽에는 모든 색조의 Red Hat 레드, 보라색, 검정색, 흰색, 청록색, 주황색, 노란색을 사용할 수 있습니다. 오른쪽의 3개 이미지는 익스프레시브 다크 색상 컬렉션 사용의 예시입니다.
Interface light
라이트 인터페이스 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 가장 많이 사용되는 배경색은 흰색, gray-10, gray-30입니다. 텍스트에는 gray-95, gray-80, interaction-blue-50 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 Red Hat 색상 팔레트의 다른 모든 색상을 사용할 수 있습니다. 오른쪽의 3개 이미지는 코어 레드 색상 컬렉션 사용의 예시입니다.

사용자 인터페이스 색상에 관한 자세한 내용은 ux.redhat.com(웹 디자인) 및 PatternFly(제품 디자인)를 참조하세요.

Interface dark
다크 인터페이스 색상을 사용하는 3가지 방법을 보여주는 색상 팔레트. 가장 많이 사용되는 배경색은 gray-95, gray-80, gray-70입니다. 텍스트에는 흰색, gray-30, interaction-blue-20 또는 red-50을 사용할 수 있습니다. 그 외 그래픽에는 Red Hat 색상 팔레트의 다른 모든 색상을 사용할 수 있습니다. 오른쪽의 3개 이미지는 다크 인터페이스 색상 컬렉션 사용의 예시입니다.

사용자 인터페이스 색상에 관한 자세한 내용은 ux.redhat.com(웹 디자인) 및 PatternFly(제품 디자인)를 참조하세요.

피해야 할 사항

잘못된 색상 사용의 예시 이미지: Red Hat 색상 팔레트 이외의 다른 색상을 사용한 프레젠테이션.

Red Hat 색상 팔레트 이외의 색상을 사용하지 않도록 하세요.

잘못된 색상 사용의 예시 이미지: Red Hat 레드를 배경색으로 사용한 광고

모든 요소에 Red Hat 레드(red-50)를 적용하지 마세요. 빨간색은 강렬한 색상입니다. 특정 요소를 강조하는 용도로 사용하세요.

잘못된 색상 사용의 예시 이미지: 레드와 세 가지 2차 색상을 사용한 삽화

하나의 시각적 요소에 2차 색상을 3개 이상 사용하지 마세요. 색상 수가 적을수록 효과적입니다.

잘못된 색상 사용의 예시 이미지: 2차 색상만 사용한 소셜 미디어 게시물.

Red Hat 레드(red-50)를 사용하는 것을 잊지 마세요. Red Hat의 모든 콘텐츠에 red-50을 포함해야 합니다.

잘못된 색상 사용의 예시 이미지: 저대비 색상을 사용한 프레젠테이션 슬라이드.

접근성이 낮은 색상을 사용하지 않도록 하세요. 항상 텍스트 및 다른 요소와 배경색이 이루는 대비 정도를 확인하세요.

잘못된 색상 사용의 예시 이미지: 여러 개의 그라데이션을 사용한 웹사이트 헤더.

과도한 그라데이션 사용을 피하세요. 그라데이션은 색상에 미묘한 깊이감과 역동성을 더하기 위한 용도로 사용하세요.

보조 색상

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

정보 팔레트

정보 팔레트는 상태와 상호작용에 사용됩니다. 이러한 색상은 장식적인 용도가 아니라 기능적인 용도로 사용됩니다. 인터페이스, 웹 페이지, 그래프 및 다이어그램, 보고서, 기타 정보를 제공하는 시각적 요소에 정보 팔레트를 사용하세요.

information-blue, success-green 및 danger-orange 색상을 보여주는 이미지.

사람 팔레트

Red Hat의 목표는 항상 실제 사람을 있는 그대로 표현하는 것입니다. 이러한 색상은 삽화로 표현된 사람의 피부 톤으로만 사용해야 합니다. 삽화에 등장하는 사람마다 1개의 피부 톤 계열을 선택합니다.사람 삽화에 대해 자세히 알아보세요.

쿨톤과 웜톤의 색조를 보여주는 이미지

색상을 통한 맥락 제공

색상을 통해 메시지 또는 데이터 포인트를 빠르게 전달할 수 있습니다. Red Hat은 사용자 인터페이스와 슬라이드 데크, 인포그래픽 및 다이어그램에서 누구나 쉽게 의미를 떠올릴 수 있는 색상을 활용하여 고객 여정 전반에서 일관성을 제공합니다.

색상연상자세한 내용
레드Red Hat레드는 Red Hat의 브랜드 색상입니다. 부정적인 것을 나타내는 데 레드를 사용하지 않도록 하세요.
danger-orange위험, 감소치명적인 오류 또는 가치 감소와 같은 부정적인 일이 발생한 경우.
orange주의치명적이지 않은 액션 또는 오류가 발생한 경우.
yellow경고치명적인 액션 또는 오류를 방지하기 위해 즉각 조치를 취해야 하는 경우.
success-green성공, 증가성공적인 액션 또는 가치 증가와 같이 긍정적인 일이 발생한 경우.
interaction-blue링크 또는 상호작용클릭하면 하이퍼링크로 연결되거나 상태가 변경되는 오브젝트 또는 텍스트.
purple정보 또는 유용한 팁유용한 정보를 사용할 수 있는 경우.
gray중간사용할 수 없거나 중요하지 않은 버튼 또는 정보.
Color swatches

색상 견본

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

orange-50

#ca6c0f

orange-60

#9e4a06

orange-70

#732e00

orange-80

#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

purple-80

#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

Accessibility

접근성

모두에게 열려 있고 모두를 지원한다는 것은 공평하고 포용적인 경험을 제공하는 것을 의미합니다. 모든 사람이 프레젠테이션 슬라이드, 웹 페이지, 제품 인터페이스, 소셜 미디어 게시물 등 모든 Red Hat 자산에 접근할 수 있어야 합니다.

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

대비

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

Red Hat 자산의 경우 작은 텍스트(17pt 이하)의 대비 비율은 최소 4.5:1이어야 합니다. 큰 텍스트(18pt 이상)와 정보성 그래픽(예: 아이콘)은 최소 3:1의 대비 비율이 필요합니다.  Adobe Color 와 같은 툴을 사용하여 색상의 대비 비율을 측정하고 WCAG에서 텍스트 및 기타 그래픽의 표준 대비 비율에 대해 자세히 알아보세요.

검정색 배경의 red-50 텍스트 및 아이콘

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

teal-60 배경의 흰색 텍스트 및 아이콘

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

red-10 배경의 검정색 텍스트 및 아이콘

blackred-10에서 색상 대비 표준을 충족합니다.

purple-80 배경의 흰색 텍스트 및 아이콘

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

gray-80 배경의 red-50 텍스트 및 아이콘

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

teal-40 배경의 흰색 텍스트 및 아이콘

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

red-60 배경의 검정색 텍스트 및 아이콘

blackred-60에서 색상 대비 표준을 충족하지 않습니다.

purple-30 배경의 흰색 텍스트 및 아이콘

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

색맹

색맹인 사람들은 대부분의 사람들과 같은 방식으로 색상의 차이를 인식하지 못하기 때문에 특히 그래프 또는 인터페이스에서 색상만 단독으로 사용하여 구분된 정보를 이해하기가 어려울 수 있습니다. 가장 흔한 색맹은 적록색 시력 결핍(녹색맹 또는 적색맹)과 청황색 시력 결핍(청색맹)입니다.

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

차트의 섹션에 해당 레이블이 표시되어 있는 원형 차트

색상과 함께 레이블을 사용하여 다이어그램, 차트, 인터페이스의 개별 섹션을 구분하세요.

잘못된 색상 사용의 예시 이미지: 색상 코드 키가 표시된 원형 차트. 레이블이 차트의 섹션을 가리키지 않음.

색상만 단독으로 사용하지 않도록 하세요. 색맹인 사람들은 색상을 구분할 수 없어 정보를 식별하지 못할 수도 있습니다.

진동

채도가 강한 색상을 함께 사용하면 색 진동이 발생할 수 있어 시각적 요소의 가장자리가 반짝이면서 흐릿하게 보일 수 있습니다. 누구든지 이러한 색상을 보고 구분하기 어려울 수 있으며, 시력에 따라 불편감을 느끼는 사람이 있을 수도 있습니다.

진동을 발생시키지 않는 고대비 색상의 예

밝은 색상과 채도가 낮은 중간 색상을 함께 사용하세요.

잘못된 색상 사용의 예시 이미지: 진동을 발생시키는 저대비 색상의 예.

강도가 비슷한 색상을 같은 영역에 사용하는 것을 피하세요.

자세히 알아보기

웹사이트 아이콘

디지털 디자인의 접근성 기본 사항

체크리스트 아이콘

웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)

눈 아이콘

Red Hat의 시각적 접근성