CSS 색상 이름

HEX, RGB, HSL 값과 함께 모든 CSS 색상 이름. 클릭하여 복사하세요.

#cd5c5c

indianred

hsl(0,53%,58%)

#f08080

lightcoral

hsl(0,79%,72%)

#fa8072

salmon

hsl(6,93%,71%)

#e9967a

darksalmon

hsl(15,72%,70%)

#dc143c

crimson

hsl(348,83%,47%)

#ff0000

red

hsl(0,100%,50%)

#b22222

firebrick

hsl(0,68%,42%)

#8b0000

darkred

hsl(0,100%,27%)

#ffc0cb

pink

hsl(350,100%,88%)

#ffb6c1

lightpink

hsl(351,100%,86%)

#ff69b4

hotpink

hsl(330,100%,71%)

#ff1493

deeppink

hsl(328,100%,54%)

#c71585

mediumvioletred

hsl(322,81%,43%)

#db7093

palevioletred

hsl(340,60%,65%)

#ffa07a

lightsalmon

hsl(17,100%,74%)

#ff7f50

coral

hsl(16,100%,66%)

#ff6347

tomato

hsl(9,100%,64%)

#ff4500

orangered

hsl(16,100%,50%)

#ff8c00

darkorange

hsl(33,100%,50%)

#ffa500

orange

hsl(39,100%,50%)

#ffd700

gold

hsl(51,100%,50%)

#ffff00

yellow

hsl(60,100%,50%)

#ffffe0

lightyellow

hsl(60,100%,94%)

#fffacd

lemonchiffon

hsl(54,100%,90%)

#fafad2

lightgoldenrodyellow

hsl(60,80%,90%)

#ffefd5

papayawhip

hsl(37,100%,92%)

#ffe4b5

moccasin

hsl(38,100%,85%)

#ffdab9

peachpuff

hsl(28,100%,86%)

#eee8aa

palegoldenrod

hsl(55,67%,80%)

#f0e68c

khaki

hsl(54,77%,75%)

#bdb76b

darkkhaki

hsl(56,38%,58%)

#adff2f

greenyellow

hsl(84,100%,59%)

#7fff00

chartreuse

hsl(90,100%,50%)

#7cfc00

lawngreen

hsl(90,100%,49%)

#00ff00

lime

hsl(120,100%,50%)

#32cd32

limegreen

hsl(120,61%,50%)

#98fb98

palegreen

hsl(120,93%,79%)

#90ee90

lightgreen

hsl(120,73%,75%)

#00fa9a

mediumspringgreen

hsl(157,100%,49%)

#00ff7f

springgreen

hsl(150,100%,50%)

#3cb371

mediumseagreen

hsl(147,50%,47%)

#2e8b57

seagreen

hsl(146,50%,36%)

#228b22

forestgreen

hsl(120,61%,34%)

#008000

green

hsl(120,100%,25%)

#006400

darkgreen

hsl(120,100%,20%)

#9acd32

yellowgreen

hsl(80,61%,50%)

#6b8e23

olivedrab

hsl(80,60%,35%)

#808000

olive

hsl(60,100%,25%)

#556b2f

darkolivegreen

hsl(82,39%,30%)

#66cdaa

mediumaquamarine

hsl(160,51%,60%)

#8fbc8f

darkseagreen

hsl(120,25%,65%)

#20b2aa

lightseagreen

hsl(177,70%,41%)

#008b8b

darkcyan

hsl(180,100%,27%)

#008080

teal

hsl(180,100%,25%)

#00ffff

aqua

hsl(180,100%,50%)

#00ffff

cyan

hsl(180,100%,50%)

#e0ffff

lightcyan

hsl(180,100%,94%)

#afeeee

paleturquoise

hsl(180,65%,81%)

#7fffd4

aquamarine

hsl(160,100%,75%)

#40e0d0

turquoise

hsl(174,72%,56%)

#48d1cc

mediumturquoise

hsl(178,60%,55%)

#00ced1

darkturquoise

hsl(181,100%,41%)

#5f9ea0

cadetblue

hsl(182,25%,50%)

#4682b4

steelblue

hsl(207,44%,49%)

#b0c4de

lightsteelblue

hsl(214,41%,78%)

#b0e0e6

powderblue

hsl(187,52%,80%)

#add8e6

lightblue

hsl(195,53%,79%)

#87ceeb

skyblue

hsl(197,71%,73%)

#87cefa

lightskyblue

hsl(203,92%,75%)

#00bfff

deepskyblue

hsl(195,100%,50%)

#1e90ff

dodgerblue

hsl(210,100%,56%)

#6495ed

cornflowerblue

hsl(219,79%,66%)

#7b68ee

mediumslateblue

hsl(249,80%,67%)

#4169e1

royalblue

hsl(225,73%,57%)

#0000ff

blue

hsl(240,100%,50%)

#0000cd

mediumblue

hsl(240,100%,40%)

#00008b

darkblue

hsl(240,100%,27%)

#000080

navy

hsl(240,100%,25%)

#191970

midnightblue

hsl(240,64%,27%)

#e6e6fa

lavender

hsl(240,67%,94%)

#d8bfd8

thistle

hsl(300,24%,80%)

#dda0dd

plum

hsl(300,47%,75%)

#ee82ee

violet

hsl(300,76%,72%)

#da70d6

orchid

hsl(302,59%,65%)

#ff00ff

fuchsia

hsl(300,100%,50%)

#ff00ff

magenta

hsl(300,100%,50%)

#ba55d3

mediumorchid

hsl(288,59%,58%)

#9370db

mediumpurple

hsl(260,60%,65%)

#663399

rebeccapurple

hsl(270,50%,40%)

#8a2be2

blueviolet

hsl(271,76%,53%)

#9400d3

darkviolet

hsl(282,100%,41%)

#9932cc

darkorchid

hsl(280,61%,50%)

#8b008b

darkmagenta

hsl(300,100%,27%)

#800080

purple

hsl(300,100%,25%)

#4b0082

indigo

hsl(275,100%,25%)

#6a5acd

slateblue

hsl(248,53%,58%)

#483d8b

darkslateblue

hsl(248,39%,39%)

#fff8dc

cornsilk

hsl(48,100%,93%)

#ffebcd

blanchedalmond

hsl(36,100%,90%)

#ffe4c4

bisque

hsl(33,100%,88%)

#ffdead

navajowhite

hsl(36,100%,84%)

#f5deb3

wheat

hsl(39,77%,83%)

#deb887

burlywood

hsl(34,57%,70%)

#d2b48c

tan

hsl(34,44%,69%)

#bc8f8f

rosybrown

hsl(0,25%,65%)

#f4a460

sandybrown

hsl(28,87%,67%)

#daa520

goldenrod

hsl(43,74%,49%)

#b8860b

darkgoldenrod

hsl(43,89%,38%)

#cd853f

peru

hsl(30,59%,53%)

#d2691e

chocolate

hsl(25,75%,47%)

#8b4513

saddlebrown

hsl(25,76%,31%)

#a0522d

sienna

hsl(19,56%,40%)

#a52a2a

brown

hsl(0,59%,41%)

#800000

maroon

hsl(0,100%,25%)

#ffffff

white

hsl(0,0%,100%)

#fffafa

snow

hsl(0,100%,99%)

#f0fff0

honeydew

hsl(120,100%,97%)

#f5fffa

mintcream

hsl(150,100%,98%)

#f0ffff

azure

hsl(180,100%,97%)

#f0f8ff

aliceblue

hsl(208,100%,97%)

#f8f8ff

ghostwhite

hsl(240,100%,99%)

#f5f5f5

whitesmoke

hsl(0,0%,96%)

#fff5ee

seashell

hsl(25,100%,97%)

#f5f5dc

beige

hsl(60,56%,91%)

#fdf5e6

oldlace

hsl(39,85%,95%)

#fffaf0

floralwhite

hsl(40,100%,97%)

#fffff0

ivory

hsl(60,100%,97%)

#faebd7

antiquewhite

hsl(34,78%,91%)

#faf0e6

linen

hsl(30,67%,94%)

#fff0f5

lavenderblush

hsl(340,100%,97%)

#ffe4e1

mistyrose

hsl(6,100%,94%)

#dcdcdc

gainsboro

hsl(0,0%,86%)

#d3d3d3

lightgray

hsl(0,0%,83%)

#c0c0c0

silver

hsl(0,0%,75%)

#a9a9a9

darkgray

hsl(0,0%,66%)

#808080

gray

hsl(0,0%,50%)

#696969

dimgray

hsl(0,0%,41%)

#778899

lightslategray

hsl(210,14%,53%)

#708090

slategray

hsl(210,13%,50%)

#2f4f4f

darkslategray

hsl(180,25%,25%)

#000000

black

hsl(0,0%,0%)

코드에서 CSS 색상 이름 사용하기

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

CSS 색상 형식 비교

Format	Example	Best for
Named	rebeccapurple	Readability, quick prototyping
Hex	#663399	Design tools, copy/paste from Figma
RGB	rgb(102, 51, 153)	Programmatic manipulation
HSL	hsl(272, 50%, 40%)	Theming, lightness/saturation control
OKLCH	oklch(40% 0.15 305)	Perceptual uniformity, CSS Color 4

색상 변환기 도구

Hex, RGB, HSL, CMYK 색상 형식 간 변환 즉시.

색상 변환기 열기 ->

자주 묻는 질문

CSS는 몇 개의 명명된 색상을 지원하나요?

CSS는 CSS Color Level 4 사양에 정의된 148개의 명명된 색상을 지원하며, 특별 키워드 'transparent'도 있습니다. 여기에는 16개의 원래 HTML 색상, X11/SVG 색상, CSS3/4의 추가 사항이 포함됩니다. 모두 최신 브라우저에서 지원됩니다.

CSS 색상 이름은 대소문자를 구분하나요?

아니요, CSS 색상 이름은 대소문자를 구분하지 않습니다. 'Red', 'red', 'RED', 'rEd'는 모두 같은 결과를 만듭니다. 하지만 camelCase('lightBlue' 등)는 사용되지 않으며, 표준 형식은 모두 소문자(lightblue)입니다.

명명된 색상과 hex 코드는 언제 사용해야 하나요?

빠른 프로토타이핑과 가독성을 위해 명명된 색상을 사용하세요(예: 'red'가 '#ff0000'보다 명확함). 정확한 색상 값이 중요한 정밀한 디자인 작업이나 명명된 팔레트에 없는 색상을 사용할 때는 hex 코드나 RGB를 사용하세요. HSL은 프로그래밍 방식의 색상 조작에 가장 적합한 경우가 많습니다.

CSS 색상 이름과 HTML 색상 이름의 차이는 무엇인가요?

HTML은 원래 16개의 기본 색상 이름을 정의했습니다. CSS는 CSS3에서 141개로 확장했고, CSS Color Level 4는 'rebeccapurple'을 추가하고 전체 X11 색상 세트를 표준화하여 총 148개가 되었습니다. 모든 HTML 색상 이름은 유효한 CSS 색상 이름입니다.

코드에서 CSS 색상 이름 사용하기

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

Format

Example

Best for

Named

rebeccapurple

Readability, quick prototyping

Hex

#663399

Design tools, copy/paste from Figma

RGB

rgb(102, 51, 153)

Programmatic manipulation

HSL

hsl(272, 50%, 40%)

Theming, lightness/saturation control

OKLCH

oklch(40% 0.15 305)

Perceptual uniformity, CSS Color 4

자주 묻는 질문

CSS는 몇 개의 명명된 색상을 지원하나요?

CSS 색상 이름은 대소문자를 구분하나요?

명명된 색상과 hex 코드는 언제 사용해야 하나요?

CSS 색상 이름과 HTML 색상 이름의 차이는 무엇인가요?

CSS 색상 이름

코드에서 CSS 색상 이름 사용하기

CSS 색상 형식 비교

색상 변환기 도구

자주 묻는 질문

Color & design

CSS 색상 이름

코드에서 CSS 색상 이름 사용하기

CSS 색상 형식 비교

색상 변환기 도구

자주 묻는 질문