컬러로그 로고 이미지
← 모든 컬러 팔레트 보기

Palette Detail

Steel Walnut

추천 분야와 이유

  • 모던 인테리어 및 프리미엄 가구미드센추리 모던 스타일의 철제 프레임과 고급 월넛 원목 가구의 조합을 시각적으로 완벽하게 구현하는 색상들입니다. 쇼룸, 룩북, 가구 브랜드 디자인에 적용 시 세련되고 신뢰감 있는 공간감을 직관적으로 전달할 수 있습니다.
  • 건축 및 구조 설계 사무소노출 콘크리트, 유리의 차가움과 목재 마감재의 따뜻함이 어우러진 현대 건축의 미학을 대변합니다. 전문성과 기술력을 강조하면서도, 사람이 머무는 공간의 따뜻함을 동시에 보여주어야 하는 비즈니스 브랜딩에 최적입니다.
  • 남성 클래식 패션 및 잡화생지 데님, 트렌치코트, 고급 가죽 구두를 연상시키는 클래식한 색 조합입니다. 화려함보다는 절제된 멋과 묵직한 존재감을 추구하는 남성 의류 매장, 가죽 공방, 혹은 프리미엄 바버샵의 브랜드 정체성을 구축하는 데 매우 효과적입니다.
  • IT 가전 및 스마트 하드웨어 디자인최근 가전 트렌드인 '인테리어에 녹아드는 테크'에 부합합니다. 스피커나 가전제품 외관에 매끄러운 금속 질감과 우드 텍스처를 결합한 듯한 인상을 주어, 차가운 기계 느낌을 중쇄하고 고급스러운 라이프스타일 오브제로서의 가치를 높여줍니다.
  • 위스키 바 및 로스터리 카페어두운 밤의 공기, 잘 볶아진 원두와 카카오, 위스키가 익어가는 오크통과 철제 인테리어가 어우러진 아늑한 어른들의 아지트를 연상시킵니다. 깊이 있는 휴식과 차분한 대화가 오가는 공간의 시각적 아이덴티티로 훌륭하게 기능합니다.

비추천 분야와 이유

  • 유아용품 및 아동 교육 콘텐츠아이들의 시선을 사로잡을 수 있는 밝은 원색이나 화사한 파스텔톤이 전혀 없습니다. 전체적인 채도가 낮고 어두워 아이들 기준에서는 자칫 지루하거나 무섭게 느껴질 수 있으며, 아동 유통업에 필수적인 활기차고 생동감 넘치는 에너지를 전달하기 어렵습니다.
  • 색조 뷰티 및 메이크업 브랜드피부 톤을 화사하게 살리거나 생기를 더해줘야 하는 뷰티 분야에는 너무 가라앉은 색조입니다. 립이나 블러셔처럼 붉고 생생한 컬러 유도가 필요한 브랜드에 사용하면, 제품이 칙칙해 보이거나 안색을 어둡게 만드는 역효과를 낼 수 있어 부적합합니다.
  • 신선 식품 및 밀키트 브랜드음식은 식욕을 돋우는 붉은색, 노란색이나 신선함을 주는 초록색이 핵심입니다. 이 색상들의 차가운 블루 그레이와 어두운 브라운 톤은 음식을 건조하거나 차갑게 보이게 만들어 식욕을 떨어뜨릴 수 있으며 신선도가 생명인 식품업에는 맞지 않습니다.
  • 캐주얼 모바일 게임 및 엔터테인먼트빠르고 유쾌한 재미를 선사해야 하는 캐주얼 게임이나 대중적인 팝문화 플랫폼에는 지나치게 이성적이고 무거운 톤입니다. 시각적 주목성이 낮아 사용자의 흥미를 순식간에 자극해야 하는 뉴미디어 콘텐츠나 오락용 서비스에는 어울리지 않습니다.
  • 친환경 및 유기농 스킨케어자연 친화적인 느낌을 주기에는 인공적이고 차가운 금속성 블루 그레이 톤의 비중이 큽니다. 깨끗함, 무해함, 날것 그대로의 자연을 직관적으로 연상시켜야 하는 유기농 브랜드의 특성상, 가공된 도시적 느낌이 강한 이 색 조합은 왜곡된 메시지를 줄 수 있습니다.

팔레트가 주는 느낌

  • 차가운 금속과 따뜻한 원목의 질감이 공존하여 이성적이면서도 아늑한 분위기를 동시에 자아냅니다. 채도가 낮고 묵직한 어두운 톤들이 중심을 잡아주어 가볍지 않고 진중한 안정감을 줍니다. 세련되게 가공된 철제와 프리미엄 목재가 만났을 때 느껴지는 현대적인 고급스러움이 특징이며, 도시적인 세련미와 자연의 편안함이 균형을 이루어 지적이고 성숙한 인상을 전달합니다.

WCAG Contrast

팔레트 색상 간 대비

각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.

Color 1

#C5B4A7와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#C5B4A7

Color 1 on Color 2

대비 샘플 텍스트

Text #C5B4A7onBG #394A50
AA
4.61:1일반 텍스트 AA 기준을 충족합니다.

Color 1 on Color 3

대비 샘플 텍스트

Text #C5B4A7onBG #927769
Fail
2.07:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 4

대비 샘플 텍스트

Text #C5B4A7onBG #20201C
AAA
8.14:1일반 텍스트 AAA 기준을 충족합니다.

Color 1 on Color 5

대비 샘플 텍스트

Text #C5B4A7onBG #A0B1BA
Fail
1.10:1텍스트 대비 기준에 미달합니다.

Color 2

#394A50와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#394A50

Color 2 on Color 1

대비 샘플 텍스트

Text #394A50onBG #C5B4A7
AA
4.61:1일반 텍스트 AA 기준을 충족합니다.

Color 2 on Color 3

대비 샘플 텍스트

Text #394A50onBG #927769
Fail
2.23:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 4

대비 샘플 텍스트

Text #394A50onBG #20201C
Fail
1.77:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 5

대비 샘플 텍스트

Text #394A50onBG #A0B1BA
AA Large
4.18:1큰 텍스트 AA 기준만 충족합니다.

Color 3

#927769와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#927769

Color 3 on Color 1

대비 샘플 텍스트

Text #927769onBG #C5B4A7
Fail
2.07:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 2

대비 샘플 텍스트

Text #927769onBG #394A50
Fail
2.23:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 4

대비 샘플 텍스트

Text #927769onBG #20201C
AA Large
3.94:1큰 텍스트 AA 기준만 충족합니다.

Color 3 on Color 5

대비 샘플 텍스트

Text #927769onBG #A0B1BA
Fail
1.87:1텍스트 대비 기준에 미달합니다.

Color 4

#20201C와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#20201C

Color 4 on Color 1

대비 샘플 텍스트

Text #20201ConBG #C5B4A7
AAA
8.14:1일반 텍스트 AAA 기준을 충족합니다.

Color 4 on Color 2

대비 샘플 텍스트

Text #20201ConBG #394A50
Fail
1.77:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 3

대비 샘플 텍스트

Text #20201ConBG #927769
AA Large
3.94:1큰 텍스트 AA 기준만 충족합니다.

Color 4 on Color 5

대비 샘플 텍스트

Text #20201ConBG #A0B1BA
AAA
7.39:1일반 텍스트 AAA 기준을 충족합니다.

Color 5

#A0B1BA와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#A0B1BA

Color 5 on Color 1

대비 샘플 텍스트

Text #A0B1BAonBG #C5B4A7
Fail
1.10:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 2

대비 샘플 텍스트

Text #A0B1BAonBG #394A50
AA Large
4.18:1큰 텍스트 AA 기준만 충족합니다.

Color 5 on Color 3

대비 샘플 텍스트

Text #A0B1BAonBG #927769
Fail
1.87:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 4

대비 샘플 텍스트

Text #A0B1BAonBG #20201C
AAA
7.39:1일반 텍스트 AAA 기준을 충족합니다.

APCA Contrast

인지 대비 기반 가독성 분석

APCA(Advanced Perceptual Contrast Algorithm)는 WCAG 2.0의 단순 대비율을 보완해 사람 눈이 느끼는 휘도, 밝은 배경·어두운 배경의 순응 상태, 텍스트 크기별 권장 용도를 함께 해석합니다.

핵심 계산 공식

어두운 글자 + 밝은 배경: Lc = (Ybg^0.56 - Ytxt^0.57) × 161.8

밝은 글자 + 어두운 배경: Lc = (Ybg^0.62 - Ytxt^0.65) × 161.8

Y 값은 RGB 채널을 시각 가중치로 변환한 휘도이며, 161.8은 결과를 약 -105~+105 범위의 사람이 읽기 쉬운 점수로 맞추는 스케일 상수입니다.

실무 적용 가이드

Lc 90 이상
12px 수준의 작은 본문도 안정적
Lc 75 이상
14px~16px 일반 본문 권장
Lc 60 이상
굵은 글씨·24px 이상 타이틀 권장
Lc 45 이상
큰 버튼·부가 정보에 제한 활용

Color 1

#C5B4A7와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#C5B4A7

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #C5B4A7onBG #394A50
Lc 60+
-70 LcWCAG 4.61:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #C5B4A7onBG #927769
Low Lc
-39 LcWCAG 2.07:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #C5B4A7onBG #20201C
Lc 75+
-88 LcWCAG 8.14:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #C5B4A7onBG #A0B1BA
Low Lc
-4 LcWCAG 1.10:1

Color 2

#394A50와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#394A50

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #394A50onBG #C5B4A7
Lc 60+
+73 LcWCAG 4.61:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #394A50onBG #927769
Low Lc
+33 LcWCAG 2.23:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #394A50onBG #20201C
Low Lc
-15 LcWCAG 1.77:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #394A50onBG #A0B1BA
Lc 60+
+67 LcWCAG 4.18:1

Color 3

#927769와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#927769

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #927769onBG #C5B4A7
Low Lc
+41 LcWCAG 2.07:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #927769onBG #394A50
Low Lc
-28 LcWCAG 2.23:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #927769onBG #20201C
Lc 45+
-46 LcWCAG 3.94:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #927769onBG #A0B1BA
Low Lc
+35 LcWCAG 1.87:1

Color 4

#20201C와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#20201C

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #20201ConBG #C5B4A7
Lc 90+
+92 LcWCAG 8.14:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #20201ConBG #394A50
Low Lc
+20 LcWCAG 1.77:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #20201ConBG #927769
Lc 45+
+52 LcWCAG 3.94:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #20201ConBG #A0B1BA
Lc 75+
+86 LcWCAG 7.39:1

Color 5

#A0B1BA와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#A0B1BA

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #A0B1BAonBG #C5B4A7
Low Lc
+7 LcWCAG 1.10:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #A0B1BAonBG #394A50
Lc 60+
-63 LcWCAG 4.18:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #A0B1BAonBG #927769
Low Lc
-32 LcWCAG 1.87:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #A0B1BAonBG #20201C
Lc 75+
-81 LcWCAG 7.39:1

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

More Palettes

다른 색상 팔레트도 둘러보기

모든 팔레트 보기 →

현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.