概要
アナログカラースキーム
詳細
隣り合う色相を選択するスキーム。
色の自然な変化と、まとまりが出るのが特長。
CSS3サンプル
サンプルhtml+CSS3
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(100,50%,50%); } tr.even td { background-color:hsl(80,50%,75%); } tr.odd td { background-color:hsl(60,75%,90%); } </style> </head> <body style="background-color:hsl(100,25%,90%);"> <div style="background-color:hsl(60,50%,75%);"><h1>Title</h1></div> <div style="background-color:hsl(80,75%,75%);"><h2>Summary</h2></div> <table> <tr> <th>header1</th> <th>header2</th> <th>header3</th> <th>header4</th> </tr> <tr class="odd"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="even"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="odd"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="even"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> </table> </body> </html>