#F49AC2 สีชมพู

Q: #F49AC2는 무슨 색인가요?

สีชมพู의 값은 #F49AC2, 대문자로는 #F49AC2. RGB는 rgb(244,154,194), HSL은 약 hsl(333 80% 78%), OKLCH는 oklch(0.789 0.117 351.9).

Q: 디자인에서 สีชมพู을 어떻게 쓰나요?

초점 요소를 하나만 두고 본문은 중성으로 유지하며, 흰색 대비 2.05, 검은색 대비 9.21를 확인한다.

Q: สีชมพู은 접근성이 좋나요?

흰색 대비 2.05(FAIL), 검은색 대비 9.21(AAA). AA에 도달할 때만 큰 글자에 쓴다.

색 변환

CMYK profile: Coated FOGRA39 · 표기는 CSS Color 4와 WCAG 2.2 대비 규칙을 따른다.

한눈에

이름	สีชมพู
표기	si chomphu
문화 체계	태국 전통색
색계	빨강
HEX	#F49AC2
RGB	rgb(244,154,194)
HSL	hsl(333 80% 78%)
HSV	hsv(333, 37%, 96%)
OKLCH	oklch(0.789 0.117 351.9)
LAB	lab(73.70 38.91 -6.40)
XYZ	59,46,57
CMYK	cmyk(0.0% 36.9% 20.5% 4.3%)
RAL	#F6A950 · Saffron yellow · RAL 1017
비고	Tuesday · Mangala (Mars) · courage

이 색에 대하여

si chomphu빨강태국 전통색

맥박이 있는 긴박감

สีชมพู의 값은 #F49AC2이며 빨강 계열에 속하고 문화적 계보가 분명하다. 단독으로 보면 빨강의 한 색이고, 태국 전통색의 맥락을 따라가면 의미가 한 겹 더해진다.

디자인 팁

먼저 สีชมพู(#F49AC2)을 중성 표면 위에 올려 보라. 빨강의 강조가 더해져야 장식이 아니라 의도로 읽힌다.

최적 용도

สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.

긴박열정적대담한식욕을 돋우는따뜻한

심리 효과

지각되는 방식

긴박열정적대담한식욕을 돋우는따뜻한

심리적 효과

สีชมพู은 빨강 화면의 에너지를 끌어올리고 시선을 행동으로 이끈다.

감정적 영향

직접적이고 따뜻한 인상이라 절제된 화면을 시끄럽지 않게 끌어올린다.

상징

무엇을 뜻하는가

에너지식욕축제

문화적 의미

태국 전통색의 맥락에서는 지역 고유의 지시가 붙으므로 캠페인 전에 상징성을 확인한다.

긍정적 연상

긍정적 연상은 에너지, 식욕, 축제 쪽으로 기울며, 초대장과 시즌 작업에 자주 등장하는 이유이기도 하다.

주의해서 사용

면적이 크면 과하면 위험하고 공격적으로 보인다로 읽히기 쉬우므로 강조와 작은 면적에만 쓴다.

활용 장면

대표적인 디자인 용도

캠페인 랜딩 페이지: สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.
잡지 표지 시스템: สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.
제품 패키지 라벨: สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.
대시보드 상태 표시: สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.
매장 안내 표지: สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.

디자인 지침

잘 쓰는 방법

권장

채도 높은 면적은 레이아웃의 20퍼센트 이하로 유지한다.
주요 행동 유도에만 쓰고 다른 곳에는 쓰지 않는다.
중성 배경에서 작은 크기 배색을 확인한다.

피할 것

형광 초록이나 전기 파랑과 나란히 두지 않는다.
흰 배경의 긴 본문에 쓰지 않는다.
색상이 다른 계열로 이동하는 그라디언트를 피한다.

브랜드 적합성

식품, 스포츠, 소매, 엔터테인먼트

영웅, 연인을 바탕에 둔 브랜드는 말보다 먼저 이 색으로 성격을 드러낸다.

트렌드 신호

맥박이 있는 긴박감

빨강은 거의 어떤 색상보다 먼저 눈에 닿아 식욕과 경계를 동시에 떠안는다. 깊은 흙빛 단계에서는 무게가 늘고, 탁한 분홍에서는 부드러워진다.

배색

함께 어울리는 색

#5DD2B1따뜻한 초점이 하나 필요한 지면

#B7638A가독성을 지켜야 하는 강조색이 필요한 인터페이스

#BCC264유혹적이되 소란스럽지 않은 패키지

역사

안료와 유래

합성 염료 이전에 สีชมพู은 광물과 식물 안료로 조합되었고, 빨강 계열은 황토, 꼭두서니, 인디고 같은 재료에 의존했다. 지금의 화면은 어느 단일 안료보다 일관되게 재현한다.

유래와 출처

어원: 「สีชมพู」意为粉色，在泰国星期色中对应星期二。

표기: si chomphu

변형

셰이드는 어둡게, 틴트는 밝게 가며 색상 각도는 그대로 유지한다.

전문가 팁: 셰이드는 어둡게, 틴트는 밝게 가며 색상 각도는 그대로 유지한다.

셰이드

같은 색상을 어둡게 만든 단계.

0% #F49AC2

10% #DC8BAF

20% #C37B9B

30% #AB6C88

40% #925C74

50% #7A4D61

60% #623E4E

70% #492E3A

80% #311F27

90% #180F13

100% #000000

틴트

표면과 배경에 쓰는 밝은 단계.

0% #F49AC2

10% #F5A4C8

20% #F6AECE

30% #F7B8D4

40% #F8C2DA

50% #FACDE1

60% #FBD7E7

70% #FCE1ED

80% #FDEBF3

90% #FEF5F9

100% #FFFFFF

디자인 스케일 50–950

50#FFEDF8100#FFDFF1200#FFC5DE300#F4A8C9400#DF8CB1500#C06B92600#A4547A700#884062800#6B2E4C900#4E1E36950#351323

다크 모드 값 (AA): #B8638B · 4.66:1

사용 사례

셰이드 → 호버·그림자·깊이
틴트 → 하이라이트·표면
균형 → 일관된 색상 시스템

디자인 요령

주도 색, 보조 색, 강조 색을 하나씩 둔다.

색 체계 비교

각 전통색과 디자인 시스템에서 가장 가까운 색을 OKLCH ΔE로 표시합니다. 값이 작을수록 가깝습니다.

아시아 전통색

สีชมพู TH ΔE 0.000

桃色 JP ΔE 0.031

石黄 TB ΔE 0.037

모두 보기 (6)

杏黄 CN ΔE 0.039

हल्दी IN ΔE 0.043

Шар MN ΔE 0.044

황 KR ΔE 0.055

Kuning ID ΔE 0.057

Vàng VN ΔE 0.123

디자인 시스템

Red 300 Tailwind ΔE 0.018

Red 3 Ant Design ΔE 0.019

Office 120 Fluent ΔE 0.021

모두 보기 (11)

Pink 300 Open Color ΔE 0.021

Indigo 300 UnoCSS ΔE 0.024

Indigo 300 Panda ΔE 0.024

Orange 7 Radix ΔE 0.025

Rose 10 Polaris ΔE 0.025

Orange 300 Chakra ΔE 0.032

Error 70 Material ΔE 0.038

Info Bootstrap ΔE 0.061

Brand (alternate) vanilla-extract ΔE 0.091

Border default Primer ΔE 0.141

Secondary StyleX ΔE 0.223

RAL Classic

Saffron yellow · RAL 1017 RAL ΔE 0.032

다른 색으로 해보기

색 라이브러리에서의 위치

아래 숫자는 사이트의 전체 116개 전통색을 빌드 시점에 정렬한 결과이며, 손으로 쓴 설명이 아닙니다.

명도 L* 73.7 — 전체 116색 중 25위(밝은 편).
채도 C 39.434 — 62위(중간 채도).
색상 333°, 빨강 계열 계열입니다.
같은 색상 계열에서 가장 가까운 색은 「สีม่วง」, ΔE OK 0.275.

같은 색상 3단계를 함께 쓸 수 있을까

「สีชมพู」의 50–950 스케일에서 200 / 500 / 800을 고릅니다. 색상은 같고 명도만 다릅니다. 아래는 하나를 글자, 다른 하나를 배경으로 했을 때의 WCAG 대비입니다.

200#FFC5DE

500#C06B92

800#6B2E4C

200 ↔ 500: 2.48:1 (FAIL)
500 ↔ 800: 2.72:1 (FAIL)
200 ↔ 800: 6.74:1 (AA)

세 조합 중 4.5:1(AA 본문)에 도달하는 것은 1조합, 3:1(큰 글자·아이콘·테두리)에 도달하는 것은 1조합입니다. 나머지는 3:1 미만이므로 글자에 쓰지 마세요.

색 조합

명도를 고정한 채 색상환을 돌린다.

쓰는 방법

가독성과 의도를 지키는 세 가지 수칙.

효과의 이유

배색 뒤에 있는 지각적 근거.

여섯 조합 모두 색상을 회전해 만들어 명도가 비슷하므로, 조합 내 최대 대비는 1.00:1~1.86:1에 머뭅니다. 면·차트·도형에 쓰고 서로 글자를 얹는 용도에는 맞지 않습니다. 글자는 중립색이나 같은 스케일의 어두운 단계를 쓰세요.

보색

색상환의 반대편으로 대비를 통해 중심색을 선명하게 만든다.

#F49AC2#5DD2B1

최적 용도: 행동 버튼과 단일 기능 강조

분할 보색

반대 색의 양옆 두 색으로 직접 보색보다 부드럽다.

#F49AC2#8ECD87#44D0DA

최적 용도: 두 개의 강조색을 가진 균형 잡힌 마케팅 레이아웃

삼각 배색

세 색상을 같은 간격으로 배치해 생동감 있지만 주도색이 필요하다.

#F49AC2#BCC264#62C7F8

최적 용도: 행사 아이덴티티와 유쾌한 지면

유사 배색

색상환에서 인접한 색으로 조용하고 일관되며 훑어보기 쉽다.

#DEA0E7#F49AC2#FD9B98

최적 용도: 배경, 차트, 차분한 제품 페이지

단색 배색

한 색상을 명도 단계로 써서 절제되고 고급스럽다.

#B06F8C#F49AC2#F7B6D3

최적 용도: 디자인 시스템, 패키지, 타이포 위계

사각 배색

두 쌍의 보색으로 풍부하지만 엄격한 비율이 필요하다.

#F49AC2#F6A472#5DD2B1#62C7F8

최적 용도: 복잡한 대시보드와 다업종 브랜드

스케일 내보내기

CSS

:root {
  --brand-50: #FFEDF8;
  --brand-100: #FFDFF1;
  --brand-200: #FFC5DE;
  --brand-300: #F4A8C9;
  --brand-400: #DF8CB1;
  --brand-500: #C06B92;
  --brand-600: #A4547A;
  --brand-700: #884062;
  --brand-800: #6B2E4C;
  --brand-900: #4E1E36;
  --brand-950: #351323;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FFEDF8',
        100: '#FFDFF1',
        200: '#FFC5DE',
        300: '#F4A8C9',
        400: '#DF8CB1',
        500: '#C06B92',
        600: '#A4547A',
        700: '#884062',
        800: '#6B2E4C',
        900: '#4E1E36',
        950: '#351323',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FFEDF8"
    },
    "100": {
      "$type": "color",
      "$value": "#FFDFF1"
    },
    "200": {
      "$type": "color",
      "$value": "#FFC5DE"
    },
    "300": {
      "$type": "color",
      "$value": "#F4A8C9"
    },
    "400": {
      "$type": "color",
      "$value": "#DF8CB1"
    },
    "500": {
      "$type": "color",
      "$value": "#C06B92"
    },
    "600": {
      "$type": "color",
      "$value": "#A4547A"
    },
    "700": {
      "$type": "color",
      "$value": "#884062"
    },
    "800": {
      "$type": "color",
      "$value": "#6B2E4C"
    },
    "900": {
      "$type": "color",
      "$value": "#4E1E36"
    },
    "950": {
      "$type": "color",
      "$value": "#351323"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FFEDF8"/>
  <rect x="100" y="0" width="100" height="90" fill="#FFDFF1"/>
  <rect x="200" y="0" width="100" height="90" fill="#FFC5DE"/>
  <rect x="300" y="0" width="100" height="90" fill="#F4A8C9"/>
  <rect x="400" y="0" width="100" height="90" fill="#DF8CB1"/>
  <rect x="500" y="0" width="100" height="90" fill="#C06B92"/>
  <rect x="600" y="0" width="100" height="90" fill="#A4547A"/>
  <rect x="700" y="0" width="100" height="90" fill="#884062"/>
  <rect x="800" y="0" width="100" height="90" fill="#6B2E4C"/>
  <rect x="900" y="0" width="100" height="90" fill="#4E1E36"/>
  <rect x="1000" y="0" width="100" height="90" fill="#351323"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 1.000, green: 0.929, blue: 0.973, alpha: 1.0)
  static let brand100 = UIColor(red: 1.000, green: 0.875, blue: 0.945, alpha: 1.0)
  static let brand200 = UIColor(red: 1.000, green: 0.773, blue: 0.871, alpha: 1.0)
  static let brand300 = UIColor(red: 0.957, green: 0.659, blue: 0.788, alpha: 1.0)
  static let brand400 = UIColor(red: 0.875, green: 0.549, blue: 0.694, alpha: 1.0)
  static let brand500 = UIColor(red: 0.753, green: 0.420, blue: 0.573, alpha: 1.0)
  static let brand600 = UIColor(red: 0.643, green: 0.329, blue: 0.478, alpha: 1.0)
  static let brand700 = UIColor(red: 0.533, green: 0.251, blue: 0.384, alpha: 1.0)
  static let brand800 = UIColor(red: 0.420, green: 0.180, blue: 0.298, alpha: 1.0)
  static let brand900 = UIColor(red: 0.306, green: 0.118, blue: 0.212, alpha: 1.0)
  static let brand950 = UIColor(red: 0.208, green: 0.075, blue: 0.137, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FFEDF8</color>
  <color name="brand_100">#FFDFF1</color>
  <color name="brand_200">#FFC5DE</color>
  <color name="brand_300">#F4A8C9</color>
  <color name="brand_400">#DF8CB1</color>
  <color name="brand_500">#C06B92</color>
  <color name="brand_600">#A4547A</color>
  <color name="brand_700">#884062</color>
  <color name="brand_800">#6B2E4C</color>
  <color name="brand_900">#4E1E36</color>
  <color name="brand_950">#351323</color>
</resources>

원칙

균형

주도 색, 보조 색, 강조 색을 하나씩 둔다.

대비

출시 전에 흰색과 검은색 모두로 본문을 검증한다.

조화

명도를 고정한 채 색상환을 돌린다.

대비 검사

출시 전에 흰색과 검은색 모두로 본문을 검증한다.

글자 색

배경 색

2.05 :1

FAIL

인용

สีชมพู은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 빨강 배색이 받쳐 주게 한다.

WCAG 대비

미리보기

Aa / Bb

#F49AC2 · สีชมพู

WCAG 대비 기준

WCAG 2.2는 텍스트와 UI 요소의 최소 대비를 정합니다. #F49AC2는 흰색 대비 2.05:1(FAIL), 검정 대비 9.21:1(AAA)입니다. 아래 표에서 글자 크기에 맞는 기준을 선택하세요.

등급	본문 텍스트	큰 텍스트(18pt+ / 14pt 굵게)	아이콘 및 UI 요소
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
미달	< 4.5 : 1	< 3 : 1	< 3 : 1

큰 텍스트는 18pt 일반 또는 14pt 굵게입니다. UI 요소는 인접 색 대비 3:1이 필요합니다. AA는 일반 기준, AAA는 강화 기준입니다.

기술 표기

색 공간별 표기

HEX

#F49AC2

CSS Color 4

RGB

244,154,194

sRGB / D65

HSL

333,80,78

HSL

OKLCH

oklch(0.789 0.117 351.9)

perceptual

LAB

74,39,-6

CIE Lab

LCH

74,39,351

CIE LCH

XYZ

59,46,57

CIE XYZ

LUV

74,54,-17

CIE LUV

HWB

333,60,4

CSS HWB

CMYK

0,37,20,4

실용 값

바로 쓰는 값

CSS

color: #F49AC2;

custom properties

Tailwind

bg-[#F49AC2] text-[#FFF]

arbitrary value

Android

#FFF49AC2

ARGB

Flutter

Color(0xFFF49AC2)

dart:ui

Photoshop

R 244 G 154 B 194 · C 0 M 37 Y 20 K 4

RGB / CMYK

CMYK 0,37,20,4

FOGRA39

색 분석

측정된 색 속성

명도

0.462

relative luminance · warm

대비

2.05 : 1

vs white · FAIL · warm

대비

9.21 : 1

vs black · AAA · warm

색상

333°

saturation 80% · warm

LCH

74,39,351

lightness 78% · warm

ΔE

47.3

สีม่วง #7B4EA8 · warm

유사 색

Irodori 전체 색 라이브러리에서 ΔE 순으로 가까운 색.

선명한 분홍 #DB7093ΔE 16.2 밝은 보라 #DDA0DDΔE 16.8 桃色 #F09199ΔE 18.1 Ягаан #D96A8BΔE 19.0 연한 빨강 #FFC0CBΔE 20.3 曙色 #D5A8B4ΔE 21.6

색각 시뮬레이션

색각 이상에서의 인상

미리보기

#F49AC2

Protanopia

#A0A8C4

Deuteranopia

#B2B5C0

Tritanopia

#FF99A7

색각 이상에서의 인상 · ΔE 47.3