CSS2の機能を使って、システム(OS)が使用するシステムカラーを使うことが可能です。 各文字をクリックすると実際にそのシステムカラーに変更します。
ただし、システムカラーですので、各自の環境に左右されます。 その反面、（訪問者にとって）日頃見慣れた色合いが使えるのでウケはいいかもしれませんが、標準色は至って味気ないものです。 また、CSS2対応ブラウザのみご使用になれます。（IE4,IE5確認済み）
手引きに従って、実際に使ってみましょう！
| ActiveBorder | アクティブなウインドウ枠の色 | テキストカラー変更 | 背景変更 | |
| ActiveCaption | タイトルバーの色 | テキストカラー変更 | 背景変更 | |
| AppWorkspace | MDIの背景色 | テキストカラー変更 | 背景変更 | |
| Background | デスクトップの背景色 | テキストカラー変更 | 背景変更 | |
| ButtonFace | 立体的なボタンの色 | テキストカラー変更 | 背景変更 | |
| ButtonHighlight | 選択されたボタンの色 | テキストカラー変更 | 背景変更 | |
| ButtonShadow | 立体的なボタンの影の色 | テキストカラー変更 | 背景変更 | |
| ButtonText | ボタンの文字色 | テキストカラー変更 | 背景変更 | |
| CaptionText | ラベルやタイトルバーの文字色 | テキストカラー変更 | 背景変更 | |
| GrayText | グレイアウトしている文字色 | テキストカラー変更 | 背景変更 | |
| Highlight | リストの選択部分の色 | テキストカラー変更 | 背景変更 | |
| HighlightText | リストの選択部分の文字色 | テキストカラー変更 | 背景変更 | |
| InactiveBorder | アクティブでないウインドウ枠の色 | テキストカラー変更 | 背景変更 | |
| InactiveCaption | アクティブでないウインドウのタイトルバーの色 | テキストカラー変更 | 背景変更 | |
| InactiveCaptionText | アクティブでないウインドウのタイトルバーの文字色 | テキストカラー変更 | 背景変更 | |
| InfoBackground | バルーンヘルプの背景色 | テキストカラー変更 | 背景変更 | |
| InfoText | バルーンヘルプの文字色 | テキストカラー変更 | 背景変更 | |
| Menu | メニューの背景色 | テキストカラー変更 | 背景変更 | |
| MenuText | メニューの文字色 | テキストカラー変更 | 背景変更 | |
| Scrollbar | スクロールバーの色 | テキストカラー変更 | 背景変更 | |
| ThreeDDarkShadow | 立体表示要素の暗い影の色 | テキストカラー変更 | 背景変更 | |
| ThreeDFace | 立体表示要素の色 | テキストカラー変更 | 背景変更 | |
| ThreeDHighlight | 選択された立体表示要素の色 | テキストカラー変更 | 背景変更 | |
| ThreeDLightShadow | 立体表示要素の明るい影の色 | テキストカラー変更 | 背景変更 | |
| ThreeDShadow | 立体表示要素の影の色 | テキストカラー変更 | 背景変更 | |
| Window | ウインドウの背景色 | テキストカラー変更 | 背景変更 | |
| WindowFrame | ダイアログボックス | テキストカラー変更 | 背景変更 | |
| WindowText | ウインドウの文字色 | テキストカラー変更 | 背景変更 |
<LINK Type="text/css" Rel="stylesheet" Href="systemcolor.css"> をHEAD部分に記述。ただし、「systemcolor.css」のパスは合わせること。
ただし、背景色( background-color )と テキストカラー( color )を効率よく指定できるようにしています。 具体的には、上表中の「キーワード0」（語尾に0を付ける）で背景色、「キーワード1」（語尾に1を付ける）でテキストカラーが 変更できます。わからない方はサンプルを参考にして下さい。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<LINK Type="text/css" Rel="stylesheet" Href="systemcolor.css">
</HEAD>
<BODY>
<H1 Id="ActiveCaption0">
<SPAN Id="CaptionText1">システムカラーを使う</SPAN></H1>
<P Id="Background0">
<SPAN Id="WindowText1">
デスクトップの背景色と同じでここはウインドウの文字色</SPAN>
</P>
</BODY>
</HTML>