open-color.css

This is just a set of minions.css-style classes for heeyeun's Open color.

Installation

Node:

npm install open-color.css

Browser:

<link rel="stylesheet" href="https://unpkg.com/open-color.css@1.0.0" />

Usage

All the classes.

/*! open-color.css */
.bc-white{border-color: #ffffff}
.c-white{color: #ffffff}
.f-white{fill: #ffffff}
.gc-white{background-color: #ffffff}
.bc-black{border-color: #000000}
.c-black{color: #000000}
.f-black{fill: #000000}
.gc-black{background-color: #000000}
.bc-gray0{border-color: #f8f9fa}
.c-gray0{color: #f8f9fa}
.f-gray0{fill: #f8f9fa}
.gc-gray0{background-color: #f8f9fa}
.bc-gray1{border-color: #f1f3f5}
.c-gray1{color: #f1f3f5}
.f-gray1{fill: #f1f3f5}
.gc-gray1{background-color: #f1f3f5}
.bc-gray2{border-color: #e9ecef}
.c-gray2{color: #e9ecef}
.f-gray2{fill: #e9ecef}
.gc-gray2{background-color: #e9ecef}
.bc-gray3{border-color: #dee2e6}
.c-gray3{color: #dee2e6}
.f-gray3{fill: #dee2e6}
.gc-gray3{background-color: #dee2e6}
.bc-gray4{border-color: #ced4da}
.c-gray4{color: #ced4da}
.f-gray4{fill: #ced4da}
.gc-gray4{background-color: #ced4da}
.bc-gray5{border-color: #adb5bd}
.c-gray5{color: #adb5bd}
.f-gray5{fill: #adb5bd}
.gc-gray5{background-color: #adb5bd}
.bc-gray6{border-color: #868e96}
.c-gray6{color: #868e96}
.f-gray6{fill: #868e96}
.gc-gray6{background-color: #868e96}
.bc-gray7{border-color: #495057}
.c-gray7{color: #495057}
.f-gray7{fill: #495057}
.gc-gray7{background-color: #495057}
.bc-gray8{border-color: #343a40}
.c-gray8{color: #343a40}
.f-gray8{fill: #343a40}
.gc-gray8{background-color: #343a40}
.bc-gray9{border-color: #212529}
.c-gray9{color: #212529}
.f-gray9{fill: #212529}
.gc-gray9{background-color: #212529}
.bc-red0{border-color: #fff5f5}
.c-red0{color: #fff5f5}
.f-red0{fill: #fff5f5}
.gc-red0{background-color: #fff5f5}
.bc-red1{border-color: #ffe3e3}
.c-red1{color: #ffe3e3}
.f-red1{fill: #ffe3e3}
.gc-red1{background-color: #ffe3e3}
.bc-red2{border-color: #ffc9c9}
.c-red2{color: #ffc9c9}
.f-red2{fill: #ffc9c9}
.gc-red2{background-color: #ffc9c9}
.bc-red3{border-color: #ffa8a8}
.c-red3{color: #ffa8a8}
.f-red3{fill: #ffa8a8}
.gc-red3{background-color: #ffa8a8}
.bc-red4{border-color: #ff8787}
.c-red4{color: #ff8787}
.f-red4{fill: #ff8787}
.gc-red4{background-color: #ff8787}
.bc-red5{border-color: #ff6b6b}
.c-red5{color: #ff6b6b}
.f-red5{fill: #ff6b6b}
.gc-red5{background-color: #ff6b6b}
.bc-red6{border-color: #fa5252}
.c-red6{color: #fa5252}
.f-red6{fill: #fa5252}
.gc-red6{background-color: #fa5252}
.bc-red7{border-color: #f03e3e}
.c-red7{color: #f03e3e}
.f-red7{fill: #f03e3e}
.gc-red7{background-color: #f03e3e}
.bc-red8{border-color: #e03131}
.c-red8{color: #e03131}
.f-red8{fill: #e03131}
.gc-red8{background-color: #e03131}
.bc-red9{border-color: #c92a2a}
.c-red9{color: #c92a2a}
.f-red9{fill: #c92a2a}
.gc-red9{background-color: #c92a2a}
.bc-pink0{border-color: #fff0f6}
.c-pink0{color: #fff0f6}
.f-pink0{fill: #fff0f6}
.gc-pink0{background-color: #fff0f6}
.bc-pink1{border-color: #ffdeeb}
.c-pink1{color: #ffdeeb}
.f-pink1{fill: #ffdeeb}
.gc-pink1{background-color: #ffdeeb}
.bc-pink2{border-color: #fcc2d7}
.c-pink2{color: #fcc2d7}
.f-pink2{fill: #fcc2d7}
.gc-pink2{background-color: #fcc2d7}
.bc-pink3{border-color: #faa2c1}
.c-pink3{color: #faa2c1}
.f-pink3{fill: #faa2c1}
.gc-pink3{background-color: #faa2c1}
.bc-pink4{border-color: #f783ac}
.c-pink4{color: #f783ac}
.f-pink4{fill: #f783ac}
.gc-pink4{background-color: #f783ac}
.bc-pink5{border-color: #f06595}
.c-pink5{color: #f06595}
.f-pink5{fill: #f06595}
.gc-pink5{background-color: #f06595}
.bc-pink6{border-color: #e64980}
.c-pink6{color: #e64980}
.f-pink6{fill: #e64980}
.gc-pink6{background-color: #e64980}
.bc-pink7{border-color: #d6336c}
.c-pink7{color: #d6336c}
.f-pink7{fill: #d6336c}
.gc-pink7{background-color: #d6336c}
.bc-pink8{border-color: #c2255c}
.c-pink8{color: #c2255c}
.f-pink8{fill: #c2255c}
.gc-pink8{background-color: #c2255c}
.bc-pink9{border-color: #a61e4d}
.c-pink9{color: #a61e4d}
.f-pink9{fill: #a61e4d}
.gc-pink9{background-color: #a61e4d}
.bc-grape0{border-color: #f8f0fc}
.c-grape0{color: #f8f0fc}
.f-grape0{fill: #f8f0fc}
.gc-grape0{background-color: #f8f0fc}
.bc-grape1{border-color: #f3d9fa}
.c-grape1{color: #f3d9fa}
.f-grape1{fill: #f3d9fa}
.gc-grape1{background-color: #f3d9fa}
.bc-grape2{border-color: #eebefa}
.c-grape2{color: #eebefa}
.f-grape2{fill: #eebefa}
.gc-grape2{background-color: #eebefa}
.bc-grape3{border-color: #e599f7}
.c-grape3{color: #e599f7}
.f-grape3{fill: #e599f7}
.gc-grape3{background-color: #e599f7}
.bc-grape4{border-color: #da77f2}
.c-grape4{color: #da77f2}
.f-grape4{fill: #da77f2}
.gc-grape4{background-color: #da77f2}
.bc-grape5{border-color: #cc5de8}
.c-grape5{color: #cc5de8}
.f-grape5{fill: #cc5de8}
.gc-grape5{background-color: #cc5de8}
.bc-grape6{border-color: #be4bdb}
.c-grape6{color: #be4bdb}
.f-grape6{fill: #be4bdb}
.gc-grape6{background-color: #be4bdb}
.bc-grape7{border-color: #ae3ec9}
.c-grape7{color: #ae3ec9}
.f-grape7{fill: #ae3ec9}
.gc-grape7{background-color: #ae3ec9}
.bc-grape8{border-color: #9c36b5}
.c-grape8{color: #9c36b5}
.f-grape8{fill: #9c36b5}
.gc-grape8{background-color: #9c36b5}
.bc-grape9{border-color: #862e9c}
.c-grape9{color: #862e9c}
.f-grape9{fill: #862e9c}
.gc-grape9{background-color: #862e9c}
.bc-violet0{border-color: #f3f0ff}
.c-violet0{color: #f3f0ff}
.f-violet0{fill: #f3f0ff}
.gc-violet0{background-color: #f3f0ff}
.bc-violet1{border-color: #e5dbff}
.c-violet1{color: #e5dbff}
.f-violet1{fill: #e5dbff}
.gc-violet1{background-color: #e5dbff}
.bc-violet2{border-color: #d0bfff}
.c-violet2{color: #d0bfff}
.f-violet2{fill: #d0bfff}
.gc-violet2{background-color: #d0bfff}
.bc-violet3{border-color: #b197fc}
.c-violet3{color: #b197fc}
.f-violet3{fill: #b197fc}
.gc-violet3{background-color: #b197fc}
.bc-violet4{border-color: #9775fa}
.c-violet4{color: #9775fa}
.f-violet4{fill: #9775fa}
.gc-violet4{background-color: #9775fa}
.bc-violet5{border-color: #845ef7}
.c-violet5{color: #845ef7}
.f-violet5{fill: #845ef7}
.gc-violet5{background-color: #845ef7}
.bc-violet6{border-color: #7950f2}
.c-violet6{color: #7950f2}
.f-violet6{fill: #7950f2}
.gc-violet6{background-color: #7950f2}
.bc-violet7{border-color: #7048e8}
.c-violet7{color: #7048e8}
.f-violet7{fill: #7048e8}
.gc-violet7{background-color: #7048e8}
.bc-violet8{border-color: #6741d9}
.c-violet8{color: #6741d9}
.f-violet8{fill: #6741d9}
.gc-violet8{background-color: #6741d9}
.bc-violet9{border-color: #5f3dc4}
.c-violet9{color: #5f3dc4}
.f-violet9{fill: #5f3dc4}
.gc-violet9{background-color: #5f3dc4}
.bc-indigo0{border-color: #edf2ff}
.c-indigo0{color: #edf2ff}
.f-indigo0{fill: #edf2ff}
.gc-indigo0{background-color: #edf2ff}
.bc-indigo1{border-color: #dbe4ff}
.c-indigo1{color: #dbe4ff}
.f-indigo1{fill: #dbe4ff}
.gc-indigo1{background-color: #dbe4ff}
.bc-indigo2{border-color: #bac8ff}
.c-indigo2{color: #bac8ff}
.f-indigo2{fill: #bac8ff}
.gc-indigo2{background-color: #bac8ff}
.bc-indigo3{border-color: #91a7ff}
.c-indigo3{color: #91a7ff}
.f-indigo3{fill: #91a7ff}
.gc-indigo3{background-color: #91a7ff}
.bc-indigo4{border-color: #748ffc}
.c-indigo4{color: #748ffc}
.f-indigo4{fill: #748ffc}
.gc-indigo4{background-color: #748ffc}
.bc-indigo5{border-color: #5c7cfa}
.c-indigo5{color: #5c7cfa}
.f-indigo5{fill: #5c7cfa}
.gc-indigo5{background-color: #5c7cfa}
.bc-indigo6{border-color: #4c6ef5}
.c-indigo6{color: #4c6ef5}
.f-indigo6{fill: #4c6ef5}
.gc-indigo6{background-color: #4c6ef5}
.bc-indigo7{border-color: #4263eb}
.c-indigo7{color: #4263eb}
.f-indigo7{fill: #4263eb}
.gc-indigo7{background-color: #4263eb}
.bc-indigo8{border-color: #3b5bdb}
.c-indigo8{color: #3b5bdb}
.f-indigo8{fill: #3b5bdb}
.gc-indigo8{background-color: #3b5bdb}
.bc-indigo9{border-color: #364fc7}
.c-indigo9{color: #364fc7}
.f-indigo9{fill: #364fc7}
.gc-indigo9{background-color: #364fc7}
.bc-blue0{border-color: #e8f7ff}
.c-blue0{color: #e8f7ff}
.f-blue0{fill: #e8f7ff}
.gc-blue0{background-color: #e8f7ff}
.bc-blue1{border-color: #ccedff}
.c-blue1{color: #ccedff}
.f-blue1{fill: #ccedff}
.gc-blue1{background-color: #ccedff}
.bc-blue2{border-color: #a3daff}
.c-blue2{color: #a3daff}
.f-blue2{fill: #a3daff}
.gc-blue2{background-color: #a3daff}
.bc-blue3{border-color: #72c3fc}
.c-blue3{color: #72c3fc}
.f-blue3{fill: #72c3fc}
.gc-blue3{background-color: #72c3fc}
.bc-blue4{border-color: #4dadf7}
.c-blue4{color: #4dadf7}
.f-blue4{fill: #4dadf7}
.gc-blue4{background-color: #4dadf7}
.bc-blue5{border-color: #329af0}
.c-blue5{color: #329af0}
.f-blue5{fill: #329af0}
.gc-blue5{background-color: #329af0}
.bc-blue6{border-color: #228ae6}
.c-blue6{color: #228ae6}
.f-blue6{fill: #228ae6}
.gc-blue6{background-color: #228ae6}
.bc-blue7{border-color: #1c7cd6}
.c-blue7{color: #1c7cd6}
.f-blue7{fill: #1c7cd6}
.gc-blue7{background-color: #1c7cd6}
.bc-blue8{border-color: #1b6ec2}
.c-blue8{color: #1b6ec2}
.f-blue8{fill: #1b6ec2}
.gc-blue8{background-color: #1b6ec2}
.bc-blue9{border-color: #1862ab}
.c-blue9{color: #1862ab}
.f-blue9{fill: #1862ab}
.gc-blue9{background-color: #1862ab}
.bc-cyan0{border-color: #e3fafc}
.c-cyan0{color: #e3fafc}
.f-cyan0{fill: #e3fafc}
.gc-cyan0{background-color: #e3fafc}
.bc-cyan1{border-color: #c5f6fa}
.c-cyan1{color: #c5f6fa}
.f-cyan1{fill: #c5f6fa}
.gc-cyan1{background-color: #c5f6fa}
.bc-cyan2{border-color: #99e9f2}
.c-cyan2{color: #99e9f2}
.f-cyan2{fill: #99e9f2}
.gc-cyan2{background-color: #99e9f2}
.bc-cyan3{border-color: #66d9e8}
.c-cyan3{color: #66d9e8}
.f-cyan3{fill: #66d9e8}
.gc-cyan3{background-color: #66d9e8}
.bc-cyan4{border-color: #3bc9db}
.c-cyan4{color: #3bc9db}
.f-cyan4{fill: #3bc9db}
.gc-cyan4{background-color: #3bc9db}
.bc-cyan5{border-color: #22b8cf}
.c-cyan5{color: #22b8cf}
.f-cyan5{fill: #22b8cf}
.gc-cyan5{background-color: #22b8cf}
.bc-cyan6{border-color: #15aabf}
.c-cyan6{color: #15aabf}
.f-cyan6{fill: #15aabf}
.gc-cyan6{background-color: #15aabf}
.bc-cyan7{border-color: #1098ad}
.c-cyan7{color: #1098ad}
.f-cyan7{fill: #1098ad}
.gc-cyan7{background-color: #1098ad}
.bc-cyan8{border-color: #0c8599}
.c-cyan8{color: #0c8599}
.f-cyan8{fill: #0c8599}
.gc-cyan8{background-color: #0c8599}
.bc-cyan9{border-color: #0b7285}
.c-cyan9{color: #0b7285}
.f-cyan9{fill: #0b7285}
.gc-cyan9{background-color: #0b7285}
.bc-teal0{border-color: #e6fcf5}
.c-teal0{color: #e6fcf5}
.f-teal0{fill: #e6fcf5}
.gc-teal0{background-color: #e6fcf5}
.bc-teal1{border-color: #c3fae8}
.c-teal1{color: #c3fae8}
.f-teal1{fill: #c3fae8}
.gc-teal1{background-color: #c3fae8}
.bc-teal2{border-color: #96f2d7}
.c-teal2{color: #96f2d7}
.f-teal2{fill: #96f2d7}
.gc-teal2{background-color: #96f2d7}
.bc-teal3{border-color: #63e6be}
.c-teal3{color: #63e6be}
.f-teal3{fill: #63e6be}
.gc-teal3{background-color: #63e6be}
.bc-teal4{border-color: #38d9a9}
.c-teal4{color: #38d9a9}
.f-teal4{fill: #38d9a9}
.gc-teal4{background-color: #38d9a9}
.bc-teal5{border-color: #20c997}
.c-teal5{color: #20c997}
.f-teal5{fill: #20c997}
.gc-teal5{background-color: #20c997}
.bc-teal6{border-color: #12b886}
.c-teal6{color: #12b886}
.f-teal6{fill: #12b886}
.gc-teal6{background-color: #12b886}
.bc-teal7{border-color: #0ca678}
.c-teal7{color: #0ca678}
.f-teal7{fill: #0ca678}
.gc-teal7{background-color: #0ca678}
.bc-teal8{border-color: #099268}
.c-teal8{color: #099268}
.f-teal8{fill: #099268}
.gc-teal8{background-color: #099268}
.bc-teal9{border-color: #087f5b}
.c-teal9{color: #087f5b}
.f-teal9{fill: #087f5b}
.gc-teal9{background-color: #087f5b}
.bc-green0{border-color: #ebfbee}
.c-green0{color: #ebfbee}
.f-green0{fill: #ebfbee}
.gc-green0{background-color: #ebfbee}
.bc-green1{border-color: #d3f9d8}
.c-green1{color: #d3f9d8}
.f-green1{fill: #d3f9d8}
.gc-green1{background-color: #d3f9d8}
.bc-green2{border-color: #b2f2bb}
.c-green2{color: #b2f2bb}
.f-green2{fill: #b2f2bb}
.gc-green2{background-color: #b2f2bb}
.bc-green3{border-color: #8ce99a}
.c-green3{color: #8ce99a}
.f-green3{fill: #8ce99a}
.gc-green3{background-color: #8ce99a}
.bc-green4{border-color: #69db7c}
.c-green4{color: #69db7c}
.f-green4{fill: #69db7c}
.gc-green4{background-color: #69db7c}
.bc-green5{border-color: #51cf66}
.c-green5{color: #51cf66}
.f-green5{fill: #51cf66}
.gc-green5{background-color: #51cf66}
.bc-green6{border-color: #40c057}
.c-green6{color: #40c057}
.f-green6{fill: #40c057}
.gc-green6{background-color: #40c057}
.bc-green7{border-color: #37b24d}
.c-green7{color: #37b24d}
.f-green7{fill: #37b24d}
.gc-green7{background-color: #37b24d}
.bc-green8{border-color: #2f9e44}
.c-green8{color: #2f9e44}
.f-green8{fill: #2f9e44}
.gc-green8{background-color: #2f9e44}
.bc-green9{border-color: #2b8a3e}
.c-green9{color: #2b8a3e}
.f-green9{fill: #2b8a3e}
.gc-green9{background-color: #2b8a3e}
.bc-lime0{border-color: #f4fce3}
.c-lime0{color: #f4fce3}
.f-lime0{fill: #f4fce3}
.gc-lime0{background-color: #f4fce3}
.bc-lime1{border-color: #e9fac8}
.c-lime1{color: #e9fac8}
.f-lime1{fill: #e9fac8}
.gc-lime1{background-color: #e9fac8}
.bc-lime2{border-color: #d8f5a2}
.c-lime2{color: #d8f5a2}
.f-lime2{fill: #d8f5a2}
.gc-lime2{background-color: #d8f5a2}
.bc-lime3{border-color: #c0eb75}
.c-lime3{color: #c0eb75}
.f-lime3{fill: #c0eb75}
.gc-lime3{background-color: #c0eb75}
.bc-lime4{border-color: #a9e34b}
.c-lime4{color: #a9e34b}
.f-lime4{fill: #a9e34b}
.gc-lime4{background-color: #a9e34b}
.bc-lime5{border-color: #94d82d}
.c-lime5{color: #94d82d}
.f-lime5{fill: #94d82d}
.gc-lime5{background-color: #94d82d}
.bc-lime6{border-color: #82c91e}
.c-lime6{color: #82c91e}
.f-lime6{fill: #82c91e}
.gc-lime6{background-color: #82c91e}
.bc-lime7{border-color: #74b816}
.c-lime7{color: #74b816}
.f-lime7{fill: #74b816}
.gc-lime7{background-color: #74b816}
.bc-lime8{border-color: #66a80f}
.c-lime8{color: #66a80f}
.f-lime8{fill: #66a80f}
.gc-lime8{background-color: #66a80f}
.bc-lime9{border-color: #5c940d}
.c-lime9{color: #5c940d}
.f-lime9{fill: #5c940d}
.gc-lime9{background-color: #5c940d}
.bc-yellow0{border-color: #fff9db}
.c-yellow0{color: #fff9db}
.f-yellow0{fill: #fff9db}
.gc-yellow0{background-color: #fff9db}
.bc-yellow1{border-color: #fff3bf}
.c-yellow1{color: #fff3bf}
.f-yellow1{fill: #fff3bf}
.gc-yellow1{background-color: #fff3bf}
.bc-yellow2{border-color: #ffec99}
.c-yellow2{color: #ffec99}
.f-yellow2{fill: #ffec99}
.gc-yellow2{background-color: #ffec99}
.bc-yellow3{border-color: #ffe066}
.c-yellow3{color: #ffe066}
.f-yellow3{fill: #ffe066}
.gc-yellow3{background-color: #ffe066}
.bc-yellow4{border-color: #ffd43b}
.c-yellow4{color: #ffd43b}
.f-yellow4{fill: #ffd43b}
.gc-yellow4{background-color: #ffd43b}
.bc-yellow5{border-color: #fcc419}
.c-yellow5{color: #fcc419}
.f-yellow5{fill: #fcc419}
.gc-yellow5{background-color: #fcc419}
.bc-yellow6{border-color: #fab005}
.c-yellow6{color: #fab005}
.f-yellow6{fill: #fab005}
.gc-yellow6{background-color: #fab005}
.bc-yellow7{border-color: #f59f00}
.c-yellow7{color: #f59f00}
.f-yellow7{fill: #f59f00}
.gc-yellow7{background-color: #f59f00}
.bc-yellow8{border-color: #f08c00}
.c-yellow8{color: #f08c00}
.f-yellow8{fill: #f08c00}
.gc-yellow8{background-color: #f08c00}
.bc-yellow9{border-color: #e67700}
.c-yellow9{color: #e67700}
.f-yellow9{fill: #e67700}
.gc-yellow9{background-color: #e67700}
.bc-orange0{border-color: #fff4e6}
.c-orange0{color: #fff4e6}
.f-orange0{fill: #fff4e6}
.gc-orange0{background-color: #fff4e6}
.bc-orange1{border-color: #ffe8cc}
.c-orange1{color: #ffe8cc}
.f-orange1{fill: #ffe8cc}
.gc-orange1{background-color: #ffe8cc}
.bc-orange2{border-color: #ffd8a8}
.c-orange2{color: #ffd8a8}
.f-orange2{fill: #ffd8a8}
.gc-orange2{background-color: #ffd8a8}
.bc-orange3{border-color: #ffc078}
.c-orange3{color: #ffc078}
.f-orange3{fill: #ffc078}
.gc-orange3{background-color: #ffc078}
.bc-orange4{border-color: #ffa94d}
.c-orange4{color: #ffa94d}
.f-orange4{fill: #ffa94d}
.gc-orange4{background-color: #ffa94d}
.bc-orange5{border-color: #ff922b}
.c-orange5{color: #ff922b}
.f-orange5{fill: #ff922b}
.gc-orange5{background-color: #ff922b}
.bc-orange6{border-color: #fd7e14}
.c-orange6{color: #fd7e14}
.f-orange6{fill: #fd7e14}
.gc-orange6{background-color: #fd7e14}
.bc-orange7{border-color: #f76707}
.c-orange7{color: #f76707}
.f-orange7{fill: #f76707}
.gc-orange7{background-color: #f76707}
.bc-orange8{border-color: #e8590c}
.c-orange8{color: #e8590c}
.f-orange8{fill: #e8590c}
.gc-orange8{background-color: #e8590c}
.bc-orange9{border-color: #d9480f}
.c-orange9{color: #d9480f}
.f-orange9{fill: #d9480f}
.gc-orange9{background-color: #d9480f}