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はプログラムによる色操作に最適なことが多いです。