Sakura Theme ~ Draft 01

Copyright © By Ben Whisman. All Rights Reserved.

Draft 01: , ;

sakura01-theme.svg ~ Note: This SVG 1.1 file may not be viewable on older browsers or IE9, but should be viewable on FF5.1 and Safari 6.
sakura01-theme.png
sakura01-theme.png

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:

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:


@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"; */