Sakura Theme ~ Draft 01
Copyright © By Ben Whisman. All Rights Reserved.
Draft 01: , ;
Fonts Used
Pristina is used for headings.
Georgia is used for body text.
Color Palette
Still To Do: Break out individual items from SVG file to separate SVG images.
Still To Do: Palette HSL items marked ? are actually HSB from Adobe Illustrator CS4. These are NOT the same as HSL, but it should be possible to convert them via PHP or JavaScript.
Note the color palette is based upon Sakura or Cherry Blossom Pink, as given by Wikipedia ~ List of colors. See Also: Wikipedia ~ Sakura for the Sakura or Japanese Cherry, and other Cherry Blossom entries.
The color palette is arranged with Hue ranging downward in increments of 90 degrees:
- 348.33 // Red-Red-Mangenta; that is, Sakura Japanese Cherry Blossom Pink, close to a tint of Alizarin Crimson;
- 258.33 // Blue-Violet;
- 168.33 // Cyan-Cyan-Green; that is, approximately Japanese Ao, a blue-green color somewhere between Viridian and Phthalo Green;
- 78.33 // Yellow-Green
- 48.33 // Golden Yellow-Brown and Golden Yellow-Orange, −30 degrees from Yellow-Green, +30 degrees from Sakura;
- 0.0 // With Saturation = 0, for grayscale and black-and-white; These do not follow the Saturation and Brightness range of the other colors in the palette, in order to be convenient to the standard colors used.
The color palette is arranged with even spaces for Saturation and Brightness in the HSB color model { 28.24%, 64.12%, 100.0%, 64.12% }; The range was devised by taking Sakura rgb( 255, 183, 197 ) and its inverse color, which is a very deep Ao of rgb( 0, 72, 58 ), and creating equal intervals between them. However, that deep Ao and its complement, a deep Sakura, seemed too dark for use, and so these were dropped from the palette.
The color Ao, a Blue-Green, is discussed in the Wikipedia ~ Color article, under Japanese and Chinese color names. See Also: Ao (color);
Also of use on Wikipedia: Traditional colors of Japan.
Research on traditional colors, textiles, and clothing styles led to a color, Kakishibu-iro, which is apparently as common as Indigo, and so both were added to the palette with their 50% tints.
See Also:
- sakura01-colors.css ~ CSS3 pseudocode list of colors used.
- sakura01-styles.css ~ CSS3 stylesheet used for this theme. Does not yet include any gradients or other CSS3-experimental features. Expect to add these.
@charset "utf-8";
/*
wiki/List_of_Colors:Cherry_Blossom used as the base color;
Other colors delta hue 90 degrees;
{ sakura red-magenta, blue-violet, cyan-green, yellow-green; }
Then sat *= 2.0 for a stronger pastel; then sat = 100%
for full hues; Then reduce brightness to 75% and then 50% for shades;
Also a golden-brown at delta 30 degrees from the yellow-green;
Maybe a red-brown at delta 60 degrees from the yellow-green;
Neutral blue-green used for a cool metallic color;
*/
/* NOTE: The HSL colors as listed are actually HSB reported from
Adobe Illustrator CS4, not HSL for the web. Use the RGB instead. */
| @_color-list "Sakura-Colors" { | ||||
| /* hue: 0; sat: 0.0%; // Greys */ | ||||
| #000000 | rgb( 0, 0, 0 ) | hsl( 0, 0%, 0.00% ) | Black | |
| #404040 | rgb( 64, 64, 64 ) | hsl( 0, 0%, 25.00% ) | Charcoal | |
| #808080 | rgb( 128, 128, 128 ) | hsl( 0, 0%, 50.00% ) | Gray | |
| #c0c0c0 | rgb( 192, 192, 192 ) | hsl( 0, 0%, 75.00% ) | Silver | |
| #e0e0e0 | rgb( 224, 224, 224 ) | hsl( 0, 0%, 87.50% ) | Platinum | |
| #ffffff | rgb( 255, 255, 255 ) | hsl( 0, 0%, 100.00% ) | White | |
| /* hue: 0; sat: 100.0%; // Reds */ | ||||
| #ff0000 | rgb( 255, 0, 0 ) | hsl( 0, 100%, 50.00% ) | Red | |
| #c00000 | rgb( 192, 0, 0 ) | hsl( 0, 100%, 37.50% ) | Red-Shade | |
| /* miscellaneous colors; */ | ||||
| #934337 | rgb( 147, 67, 55 ) | hsl( 7.83, 62.59%, 57.65% ) | Kakishibu-Iro /* // Persimmon-Tannin; */ | |
| #______ | rgb( 201, 161, 155 ) | hsl( 7.83, 22.89%, 78.82% ) | Kakishibu-Iro-Tint /* // color = ( color + white ) / 2.0; */ | |
| #00416a | rgb( 0, 65, 106 ) | hsl( 203.00, 100.00%, 42.00% ) | Indigo-Dye | |
| #______ | rgb( 127, 160, 180 ) | hsl( 202.64, 29.44%, 70.59% ) | Indigo-Dye-Tint /* // color = ( color + white ) / 2.0; */ | |
| /* hue: 348.33; // sakura cherry blossom, very red red-magenta; */ | ||||
| #ffb7c5 | rgb( 255, 183, 197 ) | ? hsl( 348.33, 28.24%, 100.00% ) | Sakura-Pale | |
| #ff5b7b | rgb( 255, 91, 123 ) | ? hsl( 348.33, 64.12%, 100.00% ) | Sakura-Light | |
| #ff0032 | rgb( 255, 0, 50 ) | ? hsl( 348.33, 100.00%, 100.00% ) | Sakura-Mid | |
| #a40020 | rgb( 164, 0, 32 ) | ? hsl( 348.33, 100.00%, 64.12% ) | Sakura-Shade | |
| #______ | rgb( 191, 137, 148 ) | hsl( 348.33, 28.24%, 75.00% ) | Sakura-Grey-Light | |
| #______ | rgb( 96, 69, 74 ) | hsl( 348.33, 28.24%, 37.50% ) | Sakura-Grey-Dark | |
| /* hue: 258.33; // off-blue-violet; */ | ||||
| #______ | rgb( 205, 183, 255 ) | hsl( 258.33, 28.24%, 100.00% ) | Violet-Pale | |
| #______ | rgb( 141, 91, 255 ) | hsl( 258.33, 64.12%, 100.00% ) | Violet-Light | |
| #______ | rgb( 78, 0, 255 ) | hsl( 258.33, 100.00%, 100.00% ) | Violet-Mid | |
| #______ | rgb( 50, 0, 164 ) | hsl( 258.33, 100.00%, 64.12% ) | Violet-Shade | |
| #______ | rgb( 154, 137, 191 ) | hsl( 258.33, 28.24%, 75.00% ) | Violet-Grey-Light | |
| #______ | rgb( 77, 69, 96 ) | hsl( 258.33, 28.24%, 37.50% ) | Violet-Grey-Dark | |
| /* hue: 168.33; // blue-green; // approximately ao in Japanese; */ | ||||
| #b7fff1 | rgb( 183, 255, 241 ) | ? hsl( 168.33, 28.24%, 100.00% ) | Ao-Pale | |
| #5bffdf | rgb( 91, 255, 223 ) | ? hsl( 168.33, 64.12%, 100.00% ) | Ao-Light | |
| #00ffcd | rgb( 0, 255, 205 ) | ? hsl( 168.33, 100.00%, 100.00% ) | Ao-Mid | |
| #00a484 | rgb( 0, 164, 132 ) | ? hsl( 168.33, 100.00%, 64.12% ) | Ao-Shade | |
| #______ | rgb( 137, 191, 181 ) | hsl( 168.33, 28.24%, 75.00% ) | Ao-Grey-Light | |
| #______ | rgb( 69, 96, 90 ) | hsl( 168.33, 28.24%, 37.50% ) | Ao-Grey-Dark | |
| /* hue: 78.33; // off-yellow-green; */ | ||||
| #______ | rgb( 233, 255, 183 ) | hsl( 78.33, 28.24%, 100.00% ) | Lime-Pale | |
| #______ | rgb( 205, 255, 91 ) | hsl( 78.33, 64.12%, 100.00% ) | Lime-Light | |
| #______ | rgb( 177, 255, 0 ) | hsl( 78.33, 100.00%, 100.00% ) | Lime-Mid | |
| #______ | rgb( 114, 164, 0 ) | hsl( 78.33, 100.00%, 64.12% ) | Lime-Shade | |
| #______ | rgb( 175, 191, 137 ) | hsl( 78.33, 28.24%, 75.00% ) | Lime-Grey-Light | |
| #______ | rgb( 87, 96, 69 ) | hsl( 78.33, 28.24%, 37.50% ) | Lime-Grey-Dark | |
| /* hue: 48.33; // golden-yellow or yellow-orange or yellow-brown; */ | ||||
| #______ | rgb( 255, 241, 183 ) | hsl( 48.33, 28.24%, 100.00% ) | Gold-Pale | |
| #______ | rgb( 255, 223, 91 ) | hsl( 48.33, 64.12%, 100.00% ) | Gold-Light | |
| #______ | rgb( 255, 205, 0 ) | hsl( 48.33, 100.00%, 100.00% ) | Gold-Mid | |
| #______ | rgb( 164, 132, 0 ) | hsl( 48.33, 100.00%, 64.12% ) | Gold-Shade | |
| #______ | rgb( 191, 181, 137 ) | hsl( 48.33, 28.24%, 75.00% ) | Gold-Grey-Light | |
| #______ | rgb( 96, 90, 69 ) | hsl( 48.33, 28.24%, 37.50% ) | Gold-Grey-Dark | |
| } /* // @_color-list "sakura-colors"; */ | ||||