A CSS repository to document and explore the real colors of the planets and other space bodies as they might appear to the human eye.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
generateSpaceBodiesColorsCss.php
spaceBodiesColors.css
spaceBodiesColors.php

README.md

https://spacecolors.io

A CSS repository and experiment to document and explore the real colors of the planets and other space bodies as they might appear to the human eye.

All the colors have been carefully picked after a thorough study from multiple sources (See references) and are considered (by the people contributing to this project) the most accurate colors that represent how the space body would look to a human eye if they were orbiting the body.

See the colors and learn more about the project: https://spacecolors.io

Instructions

You'll find the colors in the spaceBodiesColors.css file. All CSS classes assign the colors as backgrounds. Each space body has three colors and a gradient:

  • Primary color The most predominant natural accurate color that is considered to be the most representative color of the space body.
  • Secondary color A second natural accurate color that is also considered to be representative of the space body.
  • Tertiary color A third natural accurate color that is also considered to be representative of the space body.
  • Gradient A vertical gradient using various natural and accurate colors of the space body that shows a simplified but representative view of the contrasts, variances and characteristics.

If you're a PHP programmer, you can also include the spaceBodiesColors.php file in your code, the colors are specified there in the form of a PHP array.

Currently documented space bodies

  • sun
  • mercury
  • venus
  • earth
  • moon
  • mars
  • jupiter
  • saturn
  • uranus
  • neptune
  • pluto

How to use

Import the spaceBodiesColors.css file to your project and assign the CSS classes in your HTML as follows:

  • .spaceBodyBackgroundColor.[Space body name].primary To color the element's background with the primary color of the space body.

  • .spaceBodyBackgroundColor.[Space body name].secondary To color the element's background with the secondary color of the space body.

  • .spaceBodyBackgroundColor.[Space body name].tertiary To color the element's background with the tertiary color of the space body.

  • .spaceBodyBackgroundGradient.[Space body name] To color the element's background with a vertical gradient that represents the space body.

Of course, you can just take a look at the Red, Green and Blue values in the CSS code and use the color for any specific purposes. If you're new to CSS, you'll find the colors there in the syntax: .spaceBodyBackgroundColor.[Space body name].primary { background-color: rgb([Red],[Green],[Blue]); }

For contributors

The colors are stored in the spaceBodiesColors.php file as a PHP array. To generate the spaceBodiesColors.css file, run the generateSpaceBodiesColorsCss.php PHP script. Do not change the spaceBodiesColors.css directly. Here's how it works:

  • spaceBodiesColors.php Edit this file if you want to change any colors.
  • generateSpaceBodiesColorsCss.php Run this PHP script to generate the spaceBodiesColors.css CSS file (example: 'php -q generateSpaceBodiesColorsCss.php')
  • spaceBodiesColors.css This is the generated file you can use in your web projects.

References

This work was inspired by the book "Pale blue dot" by Carl Sagan and Gustav Holst's suite "The Planets"

This work is licensed under the Creative Commons Attribution 4.0 International License, meaning you can use, modify and build upon it even for commercial purposes, as long as you provide credit to the original authors, a link to http://spacecolors.io, for example!