Bob Ross’ Color Palette in CSS
source link: https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bob Ross’ Color Palette in CSS
Even if you’ve never watched an episode of The Joy of Painting, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”.
But if you’ve seen his show, then you’ll know that another trademark was his choice of paints. Bob Ross always used the same 13 paints, with decidedly un-Crayolan names like Alizarin Crimson and Pthalo Blue, loading his palette in the same arrangement each time, as you see in the photo above.
By limiting his tools and simplifying his techniques, Bob Ross introduced the joy of painting to countless non-artists, and for that he was beloved.
Sap Green
#0a3410
rgb(10, 52, 16)
hsl(128.6, 67.7%, 12.2%)
Alizarin Crimson
#4e1500
rgb(78, 21, 0)
hsl(16.2, 100%, 15.3%)
Van Dyke Brown
#221b15
rgb(34, 27, 21)
hsl(27.7, 23.6%, 10.8%)
Dark Sienna
#5f2e1f
rgb(95, 46, 31)
hsl(14.1, 50.8%, 24.7%)
Midnight Black
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
Prussian Blue
#021e44
rgb(2, 30, 68)
hsl(214.5, 94.3%, 13.7%)
Phthalo Blue
#0c0040
rgb(12, 0, 64)
hsl(251.3, 100%, 12.5%)
Phthalo Green
#102e3c
rgb(16, 46, 60)
hsl(199.1, 57.9%, 14.9%)
Cadmium Yellow
#ffec00
rgb(255, 236, 0)
hsl(55.5, 100%, 50%)
Yellow Ochre
#c79b00
rgb(199, 155, 0)
hsl(46.7, 100%, 39%)
Indian Yellow
#ffb800
rgb(255, 184, 0)
hsl(43.3, 100%, 50%)
Bright Red
#db0000
rgb(219, 0, 0)
hsl(0, 100%, 42.9%)
Titanium White
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 100%)
As a fan of Bob Ross, I wanted the colors he popularized to live on through the web. I’ve collected their hex values above and created a stylesheet so you can use class names like .phthalo-blue
, .phthalo-blue-text
, and .phthalo-blue-border
to get a Phthalo Blue background, text, and border color respectively. You can grab the CSS, and the SASS used to generate it, below.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK