Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

colors

Smarter defaults for colors on the web.

Subscribe to updates I use colors


Statistics on colors

Number of watchers on Github 8135
Number of open issues 17
Average time to close an issue 2 months
Main language CSS
Average time to merge a PR 11 days
Open pull requests 14+
Closed pull requests 30+
Last commit over 2 years ago
Repo Created over 7 years ago
Repo Last Updated over 2 years ago
Size 946 KB
Homepage http://clrs.cc
Organization / Authormrmrs
Latest Release3.0.0
Contributors16
Page Updated
Do you use colors? Leave a review!
View open issues (17)
View colors activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating colors for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

colors.css 3.0.0

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

Stats

903 85 85
bytes selectors declarations

Installation

With npm

npm install --save-dev colors.css

With Git

git clone https://github.com/tachyons-css/colors.css

Usage

Using with PostCSS

Import the css module

@import "colors.css";

Then process the CSS using the tachyons-cli

$ npm i -g tachyons-cli
$ tachyons-cli path/to/css-file.css > dist/t.css

Using the CSS

The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

<link rel="stylesheet" href="path/to/module/css/colors.css">

Development

The source CSS files can be found in the src directory. Running $ npm start will process the source CSS and place the built CSS in the css directory.

The CSS

/*

  COLORS
  Better default colors for the web

*/
/* 

   VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/
/*

   SKINS
   - Backgrounds
   - Colors
   - Border colors
   - SVG fills
   - SVG Strokes

*/
/* Backgrounds */
.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }
/* Colors */
.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }
/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/
.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }
/* Fills for SVG */
.fill-navy { fill: #001F3F; }
.fill-blue { fill: #0074D9; }
.fill-aqua { fill: #7FDBFF; }
.fill-teal { fill: #39CCCC; }
.fill-olive { fill: #3D9970; }
.fill-green { fill: #2ECC40; }
.fill-lime { fill: #01FF70; }
.fill-yellow { fill: #FFDC00; }
.fill-orange { fill: #FF851B; }
.fill-red { fill: #FF4136; }
.fill-fuchsia { fill: #F012BE; }
.fill-purple { fill: #B10DC9; }
.fill-maroon { fill: #85144B; }
.fill-white { fill: #FFFFFF; }
.fill-gray { fill: #AAAAAA; }
.fill-silver { fill: #DDDDDD; }
.fill-black { fill: #111111; }
/* Strokes for SVG */
.stroke-navy { stroke: #001F3F; }
.stroke-blue { stroke: #0074D9; }
.stroke-aqua { stroke: #7FDBFF; }
.stroke-teal { stroke: #39CCCC; }
.stroke-olive { stroke: #3D9970; }
.stroke-green { stroke: #2ECC40; }
.stroke-lime { stroke: #01FF70; }
.stroke-yellow { stroke: #FFDC00; }
.stroke-orange { stroke: #FF851B; }
.stroke-red { stroke: #FF4136; }
.stroke-fuchsia { stroke: #F012BE; }
.stroke-purple { stroke: #B10DC9; }
.stroke-maroon { stroke: #85144B; }
.stroke-white { stroke: #FFFFFF; }
.stroke-gray { stroke: #AAAAAA; }
.stroke-silver { stroke: #DDDDDD; }
.stroke-black { stroke: #111111; }

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Authors

License

MIT

colors open issues Ask a question     (View All Issues)
  • about 4 years alfred plugin
  • almost 5 years Swatch for Affinity
  • almost 5 years i18n content for project page
  • almost 5 years Automate generation of a11y examples
  • almost 6 years Add contributors to project page
  • almost 6 years Add colors to CDN and provide link on project page
  • almost 6 years Create swatch for Sketch
  • almost 7 years Additional color schemes/spaces
colors open pull requests (View All Pulls)
  • Added the site link
  • Fix typo in `yellow` class
  • Add image
  • Added Github syntax detection for sh to README.md
  • Website: Sort all swatches in consistent order
  • Add Code Of Conduct
  • Update README.md
  • Create Sketch palette
  • MIT License Link
  • Add TypeScript declaration
  • Declare TypeScript typing file.
  • Issue #113 - Addressing issue w/ maroon & red colors
  • the end
  • Fix broken links
colors questions on Stackoverflow (View All Questions)
  • Color elements given an array of colors
  • Tweaking syntax checker shellcheck's highlight colors (with syntastic and pathogen)
  • Outsourcing colors into separate place in swift?
  • How to add more identifier colors to Android IDE Studio - Android
  • using intel appframework ui design and its working fine in broweser but not working in html5 app . not showing colors only black everything
  • Plotting two variables and grouping by classes using 3 different colors and symbols in matlab
  • Changing Row Colors in SSRS Report via data values
  • How to color a string multiple colors in ListView
  • RGB to YUV422 conversion with ffmpeg, incorrect colors
  • Assigning Colors to Specific Columns in Google Charts
  • Resharper - Fonts and Colors settings not working
  • Read only textbox with different text colors?
  • Customizing the colors of a UISegmentedControl
  • How to write 512x512 pixel array to a bmp file (256 colors and 8 bpp) in c++ using ofstream?
  • How to retrieve info colors / brush from material class
  • Set default colors to Android library
  • How can I change this code to SQL Server 2000 so that it distributes colors evenly?
  • Google Vision API: Support for negative colors on QRCode detector
  • How to have multiple colors in a Windows batch file?
  • Text color(light colors) variation is not possible in android using react native
  • Easiest way to change app colors scheme in Storyboard?
  • Implemenation of authentication scheme for session password using colors in android app
  • How to change Form colors dynamically with AngularJS?
  • Custom Excel Ribbon background colors (like design with tables)
  • Google AreaChart different colors
  • Unity how to paint a mesh in different colors with gradient
  • How to preserve scatter plot series colors in the legend in matlab 2015B?
  • How can I detect a contrast of colors in an image using opencv python?
  • Tool for generating font guide for iOS Apps like Paintcode does for colors
  • Unicode and 256 colors in Raspberry Pi Terminal Environment
colors list of languages used
colors latest release notes
3.0.0 The Future is Here

giphy-2

Postcss is the future. In the spirit of the year coming to a close, I'm updating this project to represent what is to come in the world of front-end development.

The project is less monolithic now. Before - the main repo contained all of the pre-processor partials along with a complicated gulpfile. Now the main build system is just using posts and everything runs with a simple npm start. There are dedicated modules for sass, less, and stylus. Myth has been deprecated.

The repo is a lot more simple now. Simple takes time and thought. But I think it's better.

Happy Holidays.

v2.2.0 Swatches

Colors now comes bundled with swatches for Photoshop and Illustrator.

They can both be found in the assets directory.

2.0.0 Colors 2 point ohhhhh

colors

What could possibly have updated

New classes for setting border colors on html elements, as well as fills and strokes on svg elements. As Ive been working a lot with inline svg lately - Ive been thirsting for the ability to apply color classes to svg elements instead of looking up hex codes and editing the fill value every time I want to change something. Ive been using similar border-color utilities in my tachyons project and thought theyd be useful and appropriate here as well. Also edited the dev workflow that was previously set up with gulp. New plugins and tasks are available.

Stats

Even with the additions of border-color, fill and stroke, colors.css remains a small css module that wont add bloat to your existing css.

colors.css        888b (uncompressed and gzipped)
colors.min.css  647b (minified and gzipped)

Changeset

  • Removes css for styling unqualified link attributes
  • Adds classes for setting border colors on html elements
  • Adds classes for setting stroke colors on svg elements
  • Adds classes for setting fill color on svg elements
  • Adds gulp plugins for renaming files before magnification. Fixes minifcation bug in build process
  • Removes livereload gulp plug in in favor of browser-sync.

Now watch this and try not to smile: http://www.youtube.com/embed/7wMEAWcFZg0

Other projects in CSS
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark