TOOLING
TOOLING
Use this tool to find the middle (blend) color between two Hex color codes.
DIRECTIONS:
Simply input the Hex value of your first color in STEP 1, and then input the Hex value of your second color in STEP 2. Then click/tap the BLEND button.
Along with your 1st & 2nd colors, your blended color will appear in the BLEND RESULT SECTION, and will display the Hex value for that color.
Use this tool to find new harmonious colors based on the colors you've already decided to use, to fill out your color wheel.
DIRECTIONS:
Simply input the Hex value of your color you want to pair in STEP 1. Then select the color harmony mode you'd like to use in STEP 2.
Along with your 1st & 2nd colors, your blended color will appear in the BLEND RESULTS SECTION, and will display the Hex value for each color.
BLEND RESULTS SECTION:
Use this tool to fill out your color wheel colors, and access the pre-formatted PHP, JSON or CSS code in any of your projects!
DIRECTIONS:
You can start with any of the colors on the OBE COLOR WHEEL, but it's advised to begin with your WHITE and BLACK values.
After providing those values, your light gray, gray and dark gray colors will be generated automatically. Same thing applies for the other middle ring colors, once you've provided your AZURE, ORANGE and BLUE values. You are free to change any of these at any time, though! ;)
Next, simply click/tap on a part of the wheel to select it, and then add a hex color value for it. The wheel will update itself with the colors you provide.
OBE COLOR WHEEL:
You can use the other color tools on this page, to help you find colors based off of a single starting color!
You can also input any pre-designed hex codes from color palettes you like into the appropriate wheel spot(s) manually, and then use the other color tools on this page to fill in the gaps!
Once you complete your color wheel, your color hex values will be integrated into different code outputs and will be visible below this section. With this code, you can use your OBE Color Wheel colors on your projects!
The output code options are currently: PHP (for use with PHPColors), JSON format, and CSS classes for text, backgrounds and borders.
$white = new Color("ffffff");
$black = new Color("000000");
$gray = new Color("808080");
$lightGray = new Color("c0c0c0");
$darkGray = new Color("404040");
$red = new Color("ff0000");
$rose = new Color("ff0080");
$magenta = new Color("ff00ff");
$violet = new Color("8000ff");
$blue = new Color("0000ff");
$azure = new Color("0080ff");
$cyan = new Color("00ffff");
$springGreen = new Color("00ff80");
$green = new Color("00ff00");
$chartreuse = new Color("80ff00");
$yellow = new Color("ffff00");
$orange = new Color("ff8000");
$orangeGray = new Color("c08040");
$darkGrayOrange = new Color("a06020");
$blueGray = new Color("4040c0");
$lightGrayAzure = new Color("60a0e0");
{
"white": "ffffff",
"light-gray": "c0c0c0",
"gray": "808080",
"dark-gray": "404040",
"black": "000000",
"red": "ff0000",
"rose": "ff0080",
"magenta": "ff00ff",
"violet": "8000ff",
"blue": "0000ff",
"azure": "0080ff",
"cyan": "00ffff",
"spring-green": "00ff80",
"green": "00ff00",
"chartreuse": "80ff00",
"yellow": "ffff00",
"orange": "ff8000",
"orange-gray": "c08040",
"dark-gray-orange": "a06020",
"blue-gray": "4040c0",
"light-gray-azure": "60a0e0"
}
$white: #ffffff;
$light-gray: #c0c0c0;
$gray: #808080;
$dark-gray: #404040;
$black: #000000;
$red: #ff0000;
$rose: #ff0080;
$magenta: #ff00ff;
$violet: #8000ff;
$blue: #0000ff;
$azure: #0080ff;
$cyan: #00ffff;
$spring-green: #00ff80;
$green: #00ff00;
$chartreuse: #80ff00;
$yellow: #ffff00;
$orange: #ff8000;
$orange-gray: #c08040;
$dark-gray-orange: #a06020;
$blue-gray: #4040c0;
$light-gray-azure: #60a0e0;
/* OBE Color Wheel Text Classes */
.obe-text-white { color: ffffff; }
.obe-text-black { color: 000000; }
.obe-text-gray { color: 808080; }
.obe-text-light-gray { color: c0c0c0; }
.obe-text-dark-gray { color: 404040; }
.obe-text-blue-gray { color: 4040c0; }
.obe-text-light-gray-azure { color: 60a0e0; }
.obe-text-orange-gray { color: c08040; }
.obe-text-dark-gray-orange { color: a06020; }
.obe-text-red { color: ff0000; }
.obe-text-rose { color: ff0080; }
.obe-text-magenta { color: ff00ff; }
.obe-text-violet { color: 8000ff; }
.obe-text-blue { color: 0000ff; }
.obe-text-azure { color: 0080ff; }
.obe-text-cyan { color: 00ffff; }
.obe-text-spring-green { color: 00ff80; }
.obe-text-green { color: 00ff00; }
.obe-text-chartreuse { color: 80ff00; }
.obe-text-yellow { color: ffff00; }
.obe-text-orange { color: ff8000; }
/* OBE Color Wheel Background Classes */
.obe-bg-white { background-color: ffffff; }
.obe-bg-black { background-color: 000000; }
.obe-bg-gray { background-color: 808080; }
.obe-bg-light-gray { background-color: c0c0c0; }
.obe-bg-dark-gray { background-color: 404040; }
.obe-bg-blue-gray { background-color: 4040c0; }
.obe-bg-light-gray-azure { background-color: 60a0e0; }
.obe-bg-orange-gray { background-color: c08040; }
.obe-bg-dark-gray-orange { background-color: a06020; }
.obe-bg-red { background-color: ff0000; }
.obe-bg-rose { background-color: ff0080; }
.obe-bg-magenta { background-color: ff00ff; }
.obe-bg-violet { background-color: 8000ff; }
.obe-bg-blue { background-color: 0000ff; }
.obe-bg-azure { background-color: 0080ff; }
.obe-bg-cyan { background-color: 00ffff; }
.obe-bg-spring-green { background-color: 00ff80; }
.obe-bg-green { background-color: 00ff00; }
.obe-bg-chartreuse { background-color: 80ff00; }
.obe-bg-yellow { background-color: ffff00; }
.obe-bg-orange { background-color: ff8000; }
/* OBE Color Wheel Border Classes */
.obe-border-white { border-color: ffffff; }
.obe-border-black { border-color: 000000; }
.obe-border-gray { border-color: 808080; }
.obe-border-light-gray { border-color: c0c0c0; }
.obe-border-dark-gray { border-color: 404040; }
.obe-border-blue-gray { border-color: 4040c0; }
.obe-border-light-gray-azure { border-color: 60a0e0; }
.obe-border-orange-gray { border-color: c08040; }
.obe-border-dark-gray-orange { border-color: a06020; }
.obe-border-red { border-color: ff0000; }
.obe-border-rose { border-color: ff0080; }
.obe-border-magenta { border-color: ff00ff; }
.obe-border-violet { border-color: 8000ff; }
.obe-border-blue { border-color: 0000ff; }
.obe-border-azure { border-color: 0080ff; }
.obe-border-cyan { border-color: 00ffff; }
.obe-border-spring-green { border-color: 00ff80; }
.obe-border-green { border-color: 00ff00; }
.obe-border-chartreuse { border-color: 80ff00; }
.obe-border-yellow { border-color: ffff00; }
.obe-border-orange { border-color: ff8000; }
