Code
Colorpicker
What made you build this?
One of the most difficult coding tasks I had at UPS was to create a colorpicker from scratch. I had gotten used to coding tables, forms, content, etc. A colorpicker? WHEW!
It challenged my understanding of Angular, accessibility, and my overall confidence in myself. Here is a mini version of what I did:
01
We are ultimately going to make a grid (hence the nested *ngFor*), but lets keep it simple for now. In each square, there will be a radio button and an assigned color hex value
/*Selected Color Box */ .color-block { width: 500px; height: 500px; }
import { Component, OnInit } from '@angular/core'; import * as data from './colors.json'; //Imports JSON file where color hex values are located @Component({ selector: 'app-colorpicker', templateUrl: './colorpicker.component.html', styleUrls: ['./colorpicker.component.css'] }) export class ColorpickerComponent implements OnInit { colorGroup: any = (data as any).default; colorHexValue!: string; constructor() { } ngOnInit() { console.log(data); } }
[
{
"colorGroupName": "pomegranate",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F9EBEA"
},
{
"id": 2,
"colorHexValue":"F2D7D5"
},
{
"id": 3,
"colorHexValue":"E6B0AA"
},
{
"id": 4,
"colorHexValue":"D98880"
},
{
"id": 5,
"colorHexValue":"CD6155"
},
{
"id": 6,
"colorHexValue":"C0392B"
},
{
"id": 7,
"colorHexValue":"A93226"
},
{
"id": 8,
"colorHexValue":"922B21"
},
{
"id": 9,
"colorHexValue":"7B241C"
},
{
"id": 10,
"colorHexValue":"641E16"
}
]
}
]
So Why Not Use <input type="color"/> ?
Oh, how I wish I could have! Unfortunately, this input type is only compatible in versions of IE 11 and later. My dev solution had to support at least IE 10.
02
Now that we have some basic functionality, lets expand our JSON to include all the colors we want and add more CSS to create and style that grid
/*optional*/ body { margin: 0px; background: #333; } /*BEGIN Centering Our Colorpicker */ #outer { position: relative; width: 100%; height: 100vh; } #outer #container { background-color: #f3f3f3; width: 100%; max-width: 672px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.25em; } /*END Centering Our Colorpicker */ /*Color Column*/ .color-column { width: 40px; float: left; display: block; border: 1px solid #eaeaea; border-bottom: 0px; border-radius: 0.25em; } /*Color Radio*/ .color-radio-wrapper { height: 40px; } /*Color Label*/ .color-radio-label { width: 100%; font-size: 33px; /*This helps to control the height of each individual square */ } /*Color Input*/ .color-radio-input { width: 100%; cursor: pointer; margin: 0; } /* BEGIN: Selected Color Box */ .color-block-wrapper { display: flex; width: 100%; height: 150px; } .color-block { width: 100%; margin: 10px; border-radius: 0.25em; } /* END: Selected Color Box */
import { Component, OnInit } from '@angular/core'; import * as data from './colors.json'; //Imports JSON file where color hex values are located @Component({ selector: 'app-colorpicker', templateUrl: './colorpicker.component.html', styleUrls: ['./colorpicker.component.css'] }) export class ColorpickerComponent implements OnInit { colorGroup: any = (data as any).default; colorHexValue!: string; constructor() { } ngOnInit() { console.log(data); } }
[
{
"colorGroupName" : "pomegranate",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F9EBEA"
},
{
"id": 2,
"colorHexValue":"F2D7D5"
},
{
"id": 3,
"colorHexValue":"E6B0AA"
},
{
"id": 4,
"colorHexValue":"D98880"
},
{
"id": 5,
"colorHexValue":"CD6155"
},
{
"id": 6,
"colorHexValue":"C0392B"
},
{
"id": 7,
"colorHexValue":"A93226"
},
{
"id": 8,
"colorHexValue":"922B21"
},
{
"id": 9,
"colorHexValue":"7B241C"
},
{
"id": 10,
"colorHexValue":"641E16"
}
]
},
{
"colorGroupName" : "alizarin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDEDEC"
},
{
"id": 2,
"colorHexValue":"FADBD8"
},
{
"id": 3,
"colorHexValue":"F5B7B1"
},
{
"id": 4,
"colorHexValue":"F1948A"
},
{
"id": 5,
"colorHexValue":"EC7063"
},
{
"id": 6,
"colorHexValue":"E74C3C"
},
{
"id": 7,
"colorHexValue":"CB4335"
},
{
"id": 8,
"colorHexValue":"B03A2E"
},
{
"id": 9,
"colorHexValue":"943126"
},
{
"id": 10,
"colorHexValue":"78281F"
}
]
},
{
"colorGroupName" : "amethyst",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F5EEF8"
},
{
"id": 2,
"colorHexValue":"EBDEF0"
},
{
"id": 3,
"colorHexValue":"D7BDE2"
},
{
"id": 4,
"colorHexValue":"C39BD3"
},
{
"id": 5,
"colorHexValue":"AF7AC5"
},
{
"id": 6,
"colorHexValue":"9B59B6"
},
{
"id": 7,
"colorHexValue":"884EA0"
},
{
"id": 8,
"colorHexValue":"76448A"
},
{
"id": 9,
"colorHexValue":"633974"
},
{
"id": 10,
"colorHexValue":"512E5F"
}
]
},
{
"colorGroupName" : "wisteria",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4ECF7"
},
{
"id": 2,
"colorHexValue":"E8DAEF"
},
{
"id": 3,
"colorHexValue":"D2B4DE"
},
{
"id": 4,
"colorHexValue":"BB8FCE"
},
{
"id": 5,
"colorHexValue":"A569BD"
},
{
"id": 6,
"colorHexValue":"8E44AD"
},
{
"id": 7,
"colorHexValue":"7D3C98"
},
{
"id": 8,
"colorHexValue":"6C3483"
},
{
"id": 9,
"colorHexValue":"5B2C6F"
},
{
"id": 10,
"colorHexValue":"4A235A"
}
]
},
{
"colorGroupName" : "belize",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAF2F8"
},
{
"id": 2,
"colorHexValue":"D4E6F1"
},
{
"id": 3,
"colorHexValue":"A9CCE3"
},
{
"id": 4,
"colorHexValue":"7FB3D5"
},
{
"id": 5,
"colorHexValue":"5499C7"
},
{
"id": 6,
"colorHexValue":"2980B9"
},
{
"id": 7,
"colorHexValue":"2471A3"
},
{
"id": 8,
"colorHexValue":"1F618D"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"154360"
}
]
},
{
"colorGroupName" : "river",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBF5FB"
},
{
"id": 2,
"colorHexValue":"D6EAF8"
},
{
"id": 3,
"colorHexValue":"AED6F1"
},
{
"id": 4,
"colorHexValue":"85C1E9"
},
{
"id": 5,
"colorHexValue":"5DADE2"
},
{
"id": 6,
"colorHexValue":"3498DB"
},
{
"id": 7,
"colorHexValue":"2E86C1"
},
{
"id": 8,
"colorHexValue":"21618C"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"1B4F72"
}
]
},
{
"colorGroupName" : "ocean",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F8F5"
},
{
"id": 2,
"colorHexValue":"D1F2EB"
},
{
"id": 3,
"colorHexValue":"A3E4D7"
},
{
"id": 4,
"colorHexValue":"76D7C4"
},
{
"id": 5,
"colorHexValue":"48C9B0"
},
{
"id": 6,
"colorHexValue":"1ABC9C"
},
{
"id": 7,
"colorHexValue":"17A589"
},
{
"id": 8,
"colorHexValue":"148F77"
},
{
"id": 9,
"colorHexValue":"117864"
},
{
"id": 10,
"colorHexValue":"0E6251"
}
]
},
{
"colorGroupName": "nephritis",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F6F3"
},
{
"id": 2,
"colorHexValue":"D0ECE7"
},
{
"id": 3,
"colorHexValue":"A2D9CE"
},
{
"id": 4,
"colorHexValue":"73C6B6"
},
{
"id": 5,
"colorHexValue":"45B39D"
},
{
"id": 6,
"colorHexValue":"16A085"
},
{
"id": 7,
"colorHexValue":"138D75"
},
{
"id": 8,
"colorHexValue":"117A65"
},
{
"id": 9,
"colorHexValue":"0E6655"
},
{
"id": 10,
"colorHexValue":"0B5345"
}
]
},
{
"colorGroupName": "emerald",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E9F7EF"
},
{
"id": 2,
"colorHexValue":"D4EFDF"
},
{
"id": 3,
"colorHexValue":"A9DFBF"
},
{
"id": 4,
"colorHexValue":"7DCEA0"
},
{
"id": 5,
"colorHexValue":"52BE80"
},
{
"id": 6,
"colorHexValue":"27AE60"
},
{
"id": 7,
"colorHexValue":"229954"
},
{
"id": 8,
"colorHexValue":"1E8449"
},
{
"id": 9,
"colorHexValue":"196F3D"
},
{
"id": 10,
"colorHexValue":"145A32"
}
]
},
{
"colorGroupName": "sunflower",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAFAF1"
},
{
"id": 2,
"colorHexValue":"D5F5E3"
},
{
"id": 3,
"colorHexValue":"ABEBC6"
},
{
"id": 4,
"colorHexValue":"82E0AA"
},
{
"id": 5,
"colorHexValue":"58D68D"
},
{
"id": 6,
"colorHexValue":"2ECC71"
},
{
"id": 7,
"colorHexValue":"28B463"
},
{
"id": 8,
"colorHexValue":"239B56"
},
{
"id": 9,
"colorHexValue":"1D8348"
},
{
"id": 10,
"colorHexValue":"186A3B"
}
]
},
{
"colorGroupName": "orange",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FCF3CF"
},
{
"id": 3,
"colorHexValue":"F9E79F"
},
{
"id": 4,
"colorHexValue":"F7DC6F"
},
{
"id": 5,
"colorHexValue":"F4D03F"
},
{
"id": 6,
"colorHexValue":"F1C40F"
},
{
"id": 7,
"colorHexValue":"D4AC0D"
},
{
"id": 8,
"colorHexValue":"B7950B"
},
{
"id": 9,
"colorHexValue":"9A7D0A"
},
{
"id": 10,
"colorHexValue":"7D6608"
}
]
},
{
"colorGroupName":"carrot",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FDEBD0"
},
{
"id": 3,
"colorHexValue":"FAD7A0"
},
{
"id": 4,
"colorHexValue":"F8C471"
},
{
"id": 5,
"colorHexValue":"F5B041"
},
{
"id": 6,
"colorHexValue":"F39C12"
},
{
"id": 7,
"colorHexValue":"D68910"
},
{
"id": 8,
"colorHexValue":"B9770E"
},
{
"id": 9,
"colorHexValue":"9C640C"
},
{
"id": 10,
"colorHexValue":"7E5109"
}
]
},
{
"colorGroupName": "pumpkin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDF2E9"
},
{
"id": 2,
"colorHexValue":"FAE5D3"
},
{
"id": 3,
"colorHexValue":"F5CBA7"
},
{
"id": 4,
"colorHexValue":"F0B27A"
},
{
"id": 5,
"colorHexValue":"EB984E"
},
{
"id": 6,
"colorHexValue":"E67E22"
},
{
"id": 7,
"colorHexValue":"CA6F1E"
},
{
"id": 8,
"colorHexValue":"AF601A"
},
{
"id": 9,
"colorHexValue":"935116"
},
{
"id": 10,
"colorHexValue":"784212"
}
]
},
{
"colorGroupName": "concrete",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4F6F6"
},
{
"id": 2,
"colorHexValue":"EAEDED"
},
{
"id": 3,
"colorHexValue":"D5DBDB"
},
{
"id": 4,
"colorHexValue":"BFC9CA"
},
{
"id": 5,
"colorHexValue":"AAB7B8"
},
{
"id": 6,
"colorHexValue":"95A5A6"
},
{
"id": 7,
"colorHexValue":"839192"
},
{
"id": 8,
"colorHexValue":"717D7E"
},
{
"id": 9,
"colorHexValue":"5F6A6A"
},
{
"id": 10,
"colorHexValue":"4D5656"
}
]
},
{
"colorGroupName": "asbestos",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F2F4F4"
},
{
"id": 2,
"colorHexValue":"E5E8E8"
},
{
"id": 3,
"colorHexValue":"CCD1D1"
},
{
"id": 4,
"colorHexValue":"B2BABB"
},
{
"id": 5,
"colorHexValue":"99A3A4"
},
{
"id": 6,
"colorHexValue":"7F8C8D"
},
{
"id": 7,
"colorHexValue":"707B7C"
},
{
"id": 8,
"colorHexValue":"616A6B"
},
{
"id": 9,
"colorHexValue":"515A5A"
},
{
"id": 10,
"colorHexValue":"424949"
}
]
},
{
"colorGroupName": "asphalt",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBEDEF"
},
{
"id": 2,
"colorHexValue":"D6DBDF"
},
{
"id": 3,
"colorHexValue":"AEB6BF"
},
{
"id": 4,
"colorHexValue":"85929E"
},
{
"id": 5,
"colorHexValue":"5D6D7E"
},
{
"id": 6,
"colorHexValue":"34495E"
},
{
"id": 7,
"colorHexValue":"2E4053"
},
{
"id": 8,
"colorHexValue":"283747"
},
{
"id": 9,
"colorHexValue":"212F3C"
},
{
"id": 10,
"colorHexValue":"1B2631"
}
]
}
]
03
Now, let’s “remove” those radio buttons by decreasing the opacity and create a focused state so our users have a visual cue on which square has been selected.
/*optional*/ body { margin: 0px; background: #333; } /*BEGIN Centering Our Colorpicker */ #outer { position: relative; width: 100%; height: 100vh; } #outer #container { background-color: #f3f3f3; width: 100%; max-width: 672px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.25em; } /*END Centering Our Colorpicker */ /*Color Column*/ .color-column { width: 40px; float: left; display: block; border: 1px solid #eaeaea; border-bottom: 0px; border-radius: 0.25em; } /*Color Radio*/ .color-radio-wrapper { height: 40px; } /*Color Label*/ .color-radio-label { width: 100%; font-size: 33px; /*This helps to control the height of each individual square */ } /*Color Input*/ .color-radio-input { width: 100%; cursor: pointer; margin: 0;
opacity: 0;/*Makes the circled radio button "disappear"*/ }
/*Focused Input*/ .color-radio-wrapper.color-is-selected {
outline: 1px solid blue;
} /* BEGIN: Selected Color Box */ .color-block-wrapper { display: flex; width: 100%; height: 150px; } .color-block { width: 100%; margin: 10px; border-radius: 0.25em; } /* END: Selected Color Box */
import { Component, OnInit } from '@angular/core'; import * as data from './colors.json'; //Imports JSON file where color hex values are located @Component({ selector: 'app-colorpicker', templateUrl: './colorpicker.component.html', styleUrls: ['./colorpicker.component.css'] }) export class ColorpickerComponent implements OnInit { colorGroup: any = (data as any).default; colorHexValue!: string; constructor() { } ngOnInit() { console.log(data); } }
[
{
"colorGroupName" : "pomegranate",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F9EBEA"
},
{
"id": 2,
"colorHexValue":"F2D7D5"
},
{
"id": 3,
"colorHexValue":"E6B0AA"
},
{
"id": 4,
"colorHexValue":"D98880"
},
{
"id": 5,
"colorHexValue":"CD6155"
},
{
"id": 6,
"colorHexValue":"C0392B"
},
{
"id": 7,
"colorHexValue":"A93226"
},
{
"id": 8,
"colorHexValue":"922B21"
},
{
"id": 9,
"colorHexValue":"7B241C"
},
{
"id": 10,
"colorHexValue":"641E16"
}
]
},
{
"colorGroupName" : "alizarin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDEDEC"
},
{
"id": 2,
"colorHexValue":"FADBD8"
},
{
"id": 3,
"colorHexValue":"F5B7B1"
},
{
"id": 4,
"colorHexValue":"F1948A"
},
{
"id": 5,
"colorHexValue":"EC7063"
},
{
"id": 6,
"colorHexValue":"E74C3C"
},
{
"id": 7,
"colorHexValue":"CB4335"
},
{
"id": 8,
"colorHexValue":"B03A2E"
},
{
"id": 9,
"colorHexValue":"943126"
},
{
"id": 10,
"colorHexValue":"78281F"
}
]
},
{
"colorGroupName" : "amethyst",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F5EEF8"
},
{
"id": 2,
"colorHexValue":"EBDEF0"
},
{
"id": 3,
"colorHexValue":"D7BDE2"
},
{
"id": 4,
"colorHexValue":"C39BD3"
},
{
"id": 5,
"colorHexValue":"AF7AC5"
},
{
"id": 6,
"colorHexValue":"9B59B6"
},
{
"id": 7,
"colorHexValue":"884EA0"
},
{
"id": 8,
"colorHexValue":"76448A"
},
{
"id": 9,
"colorHexValue":"633974"
},
{
"id": 10,
"colorHexValue":"512E5F"
}
]
},
{
"colorGroupName" : "wisteria",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4ECF7"
},
{
"id": 2,
"colorHexValue":"E8DAEF"
},
{
"id": 3,
"colorHexValue":"D2B4DE"
},
{
"id": 4,
"colorHexValue":"BB8FCE"
},
{
"id": 5,
"colorHexValue":"A569BD"
},
{
"id": 6,
"colorHexValue":"8E44AD"
},
{
"id": 7,
"colorHexValue":"7D3C98"
},
{
"id": 8,
"colorHexValue":"6C3483"
},
{
"id": 9,
"colorHexValue":"5B2C6F"
},
{
"id": 10,
"colorHexValue":"4A235A"
}
]
},
{
"colorGroupName" : "belize",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAF2F8"
},
{
"id": 2,
"colorHexValue":"D4E6F1"
},
{
"id": 3,
"colorHexValue":"A9CCE3"
},
{
"id": 4,
"colorHexValue":"7FB3D5"
},
{
"id": 5,
"colorHexValue":"5499C7"
},
{
"id": 6,
"colorHexValue":"2980B9"
},
{
"id": 7,
"colorHexValue":"2471A3"
},
{
"id": 8,
"colorHexValue":"1F618D"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"154360"
}
]
},
{
"colorGroupName" : "river",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBF5FB"
},
{
"id": 2,
"colorHexValue":"D6EAF8"
},
{
"id": 3,
"colorHexValue":"AED6F1"
},
{
"id": 4,
"colorHexValue":"85C1E9"
},
{
"id": 5,
"colorHexValue":"5DADE2"
},
{
"id": 6,
"colorHexValue":"3498DB"
},
{
"id": 7,
"colorHexValue":"2E86C1"
},
{
"id": 8,
"colorHexValue":"21618C"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"1B4F72"
}
]
},
{
"colorGroupName" : "ocean",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F8F5"
},
{
"id": 2,
"colorHexValue":"D1F2EB"
},
{
"id": 3,
"colorHexValue":"A3E4D7"
},
{
"id": 4,
"colorHexValue":"76D7C4"
},
{
"id": 5,
"colorHexValue":"48C9B0"
},
{
"id": 6,
"colorHexValue":"1ABC9C"
},
{
"id": 7,
"colorHexValue":"17A589"
},
{
"id": 8,
"colorHexValue":"148F77"
},
{
"id": 9,
"colorHexValue":"117864"
},
{
"id": 10,
"colorHexValue":"0E6251"
}
]
},
{
"colorGroupName": "nephritis",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F6F3"
},
{
"id": 2,
"colorHexValue":"D0ECE7"
},
{
"id": 3,
"colorHexValue":"A2D9CE"
},
{
"id": 4,
"colorHexValue":"73C6B6"
},
{
"id": 5,
"colorHexValue":"45B39D"
},
{
"id": 6,
"colorHexValue":"16A085"
},
{
"id": 7,
"colorHexValue":"138D75"
},
{
"id": 8,
"colorHexValue":"117A65"
},
{
"id": 9,
"colorHexValue":"0E6655"
},
{
"id": 10,
"colorHexValue":"0B5345"
}
]
},
{
"colorGroupName": "emerald",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E9F7EF"
},
{
"id": 2,
"colorHexValue":"D4EFDF"
},
{
"id": 3,
"colorHexValue":"A9DFBF"
},
{
"id": 4,
"colorHexValue":"7DCEA0"
},
{
"id": 5,
"colorHexValue":"52BE80"
},
{
"id": 6,
"colorHexValue":"27AE60"
},
{
"id": 7,
"colorHexValue":"229954"
},
{
"id": 8,
"colorHexValue":"1E8449"
},
{
"id": 9,
"colorHexValue":"196F3D"
},
{
"id": 10,
"colorHexValue":"145A32"
}
]
},
{
"colorGroupName": "sunflower",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAFAF1"
},
{
"id": 2,
"colorHexValue":"D5F5E3"
},
{
"id": 3,
"colorHexValue":"ABEBC6"
},
{
"id": 4,
"colorHexValue":"82E0AA"
},
{
"id": 5,
"colorHexValue":"58D68D"
},
{
"id": 6,
"colorHexValue":"2ECC71"
},
{
"id": 7,
"colorHexValue":"28B463"
},
{
"id": 8,
"colorHexValue":"239B56"
},
{
"id": 9,
"colorHexValue":"1D8348"
},
{
"id": 10,
"colorHexValue":"186A3B"
}
]
},
{
"colorGroupName": "orange",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FCF3CF"
},
{
"id": 3,
"colorHexValue":"F9E79F"
},
{
"id": 4,
"colorHexValue":"F7DC6F"
},
{
"id": 5,
"colorHexValue":"F4D03F"
},
{
"id": 6,
"colorHexValue":"F1C40F"
},
{
"id": 7,
"colorHexValue":"D4AC0D"
},
{
"id": 8,
"colorHexValue":"B7950B"
},
{
"id": 9,
"colorHexValue":"9A7D0A"
},
{
"id": 10,
"colorHexValue":"7D6608"
}
]
},
{
"colorGroupName":"carrot",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FDEBD0"
},
{
"id": 3,
"colorHexValue":"FAD7A0"
},
{
"id": 4,
"colorHexValue":"F8C471"
},
{
"id": 5,
"colorHexValue":"F5B041"
},
{
"id": 6,
"colorHexValue":"F39C12"
},
{
"id": 7,
"colorHexValue":"D68910"
},
{
"id": 8,
"colorHexValue":"B9770E"
},
{
"id": 9,
"colorHexValue":"9C640C"
},
{
"id": 10,
"colorHexValue":"7E5109"
}
]
},
{
"colorGroupName": "pumpkin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDF2E9"
},
{
"id": 2,
"colorHexValue":"FAE5D3"
},
{
"id": 3,
"colorHexValue":"F5CBA7"
},
{
"id": 4,
"colorHexValue":"F0B27A"
},
{
"id": 5,
"colorHexValue":"EB984E"
},
{
"id": 6,
"colorHexValue":"E67E22"
},
{
"id": 7,
"colorHexValue":"CA6F1E"
},
{
"id": 8,
"colorHexValue":"AF601A"
},
{
"id": 9,
"colorHexValue":"935116"
},
{
"id": 10,
"colorHexValue":"784212"
}
]
},
{
"colorGroupName": "concrete",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4F6F6"
},
{
"id": 2,
"colorHexValue":"EAEDED"
},
{
"id": 3,
"colorHexValue":"D5DBDB"
},
{
"id": 4,
"colorHexValue":"BFC9CA"
},
{
"id": 5,
"colorHexValue":"AAB7B8"
},
{
"id": 6,
"colorHexValue":"95A5A6"
},
{
"id": 7,
"colorHexValue":"839192"
},
{
"id": 8,
"colorHexValue":"717D7E"
},
{
"id": 9,
"colorHexValue":"5F6A6A"
},
{
"id": 10,
"colorHexValue":"4D5656"
}
]
},
{
"colorGroupName": "asbestos",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F2F4F4"
},
{
"id": 2,
"colorHexValue":"E5E8E8"
},
{
"id": 3,
"colorHexValue":"CCD1D1"
},
{
"id": 4,
"colorHexValue":"B2BABB"
},
{
"id": 5,
"colorHexValue":"99A3A4"
},
{
"id": 6,
"colorHexValue":"7F8C8D"
},
{
"id": 7,
"colorHexValue":"707B7C"
},
{
"id": 8,
"colorHexValue":"616A6B"
},
{
"id": 9,
"colorHexValue":"515A5A"
},
{
"id": 10,
"colorHexValue":"424949"
}
]
},
{
"colorGroupName": "asphalt",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBEDEF"
},
{
"id": 2,
"colorHexValue":"D6DBDF"
},
{
"id": 3,
"colorHexValue":"AEB6BF"
},
{
"id": 4,
"colorHexValue":"85929E"
},
{
"id": 5,
"colorHexValue":"5D6D7E"
},
{
"id": 6,
"colorHexValue":"34495E"
},
{
"id": 7,
"colorHexValue":"2E4053"
},
{
"id": 8,
"colorHexValue":"283747"
},
{
"id": 9,
"colorHexValue":"212F3C"
},
{
"id": 10,
"colorHexValue":"1B2631"
}
]
}
]
04
Lastly, lets add a text input with validation so our users can add custom hex values
/*optional*/ body { margin: 0px; background: #333; } /*BEGIN Centering Our Colorpicker */ #outer { position: relative; width: 100%; height: 100vh; } #outer #container { background-color: #f3f3f3; width: 100%; max-width: 672px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.25em; } /*END Centering Our Colorpicker */ /*Color Column*/ .color-column { width: 40px; float: left; display: block; border: 1px solid #eaeaea; border-bottom: 0px; border-radius: 0.25em; } /*Color Radio*/ .color-radio-wrapper { height: 40px; } /*Color Label*/ .color-radio-label { width: 100%; font-size: 33px; /*This helps to control the height of each individual square */ } /*Color Input*/ .color-radio-input { width: 100%; cursor: pointer; margin: 0; opacity: 0; } /* BEGIN: Selected Color Box */ .color-block-wrapper { display: flex; width: 100%; height: 150px; } .color-block { width: 100%; margin: 10px; border-radius: 0.25em; } /* END: Selected Color Box */ /*Selected/"Focused" State*/ .color-radio-wrapper.color-is-selected { outline: 1px solid blue; } /******* NEW CSS *************/ /*Hex Input Styles*/ .hex-input-wrapper { margin: 10px; display: inline-block; width: 50%; } /*Hex Label*/ .hex-label { display: inline-block; margin-bottom: .5rem; } /*Hex Input*/ .hex-input { display: block; height: 34px; font-size: 16px; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-style: solid; border-width: 1px; } .hex-input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .hex-input-group .hex-input-group-text { display: flex; align-items: center; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; } /* Hex Input Error State */ .hex-input.ng-invalid:not(.ng-pristine) { border: 2px solid #D40000; } .hex-input.ng-invalid:not(.ng-pristine):focus { outline: 2px solid #D40000; } .hex-error-message { color: #D40000; padding-top: 10px; }
import { Component, OnInit } from '@angular/core'; import * as data from './colors.json'; //Imports JSON file where color hex values are located import { FormGroup, FormBuilder, Validators } from '@angular/forms'; //Needed for error handling @Component({ selector: 'app-colorpicker', templateUrl: './colorpicker.component.html', styleUrls: ['./colorpicker.component.css'] }) export class ColorpickerComponent implements OnInit { colorGroup: any = (data as any).default; colorSelected!: string; colorInput!: string; angForm!: FormGroup; //Initialize FormGroup Variable. constructor(private fb: FormBuilder) { this.createForm(); } //Generate Form Controls createForm() { this.angForm = this.fb.group({ hexInput: ['', Validators.required] }); } ngOnInit() { console.log(data); } }
[
{
"colorGroupName" : "pomegranate",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F9EBEA"
},
{
"id": 2,
"colorHexValue":"F2D7D5"
},
{
"id": 3,
"colorHexValue":"E6B0AA"
},
{
"id": 4,
"colorHexValue":"D98880"
},
{
"id": 5,
"colorHexValue":"CD6155"
},
{
"id": 6,
"colorHexValue":"C0392B"
},
{
"id": 7,
"colorHexValue":"A93226"
},
{
"id": 8,
"colorHexValue":"922B21"
},
{
"id": 9,
"colorHexValue":"7B241C"
},
{
"id": 10,
"colorHexValue":"641E16"
}
]
},
{
"colorGroupName" : "alizarin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDEDEC"
},
{
"id": 2,
"colorHexValue":"FADBD8"
},
{
"id": 3,
"colorHexValue":"F5B7B1"
},
{
"id": 4,
"colorHexValue":"F1948A"
},
{
"id": 5,
"colorHexValue":"EC7063"
},
{
"id": 6,
"colorHexValue":"E74C3C"
},
{
"id": 7,
"colorHexValue":"CB4335"
},
{
"id": 8,
"colorHexValue":"B03A2E"
},
{
"id": 9,
"colorHexValue":"943126"
},
{
"id": 10,
"colorHexValue":"78281F"
}
]
},
{
"colorGroupName" : "amethyst",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F5EEF8"
},
{
"id": 2,
"colorHexValue":"EBDEF0"
},
{
"id": 3,
"colorHexValue":"D7BDE2"
},
{
"id": 4,
"colorHexValue":"C39BD3"
},
{
"id": 5,
"colorHexValue":"AF7AC5"
},
{
"id": 6,
"colorHexValue":"9B59B6"
},
{
"id": 7,
"colorHexValue":"884EA0"
},
{
"id": 8,
"colorHexValue":"76448A"
},
{
"id": 9,
"colorHexValue":"633974"
},
{
"id": 10,
"colorHexValue":"512E5F"
}
]
},
{
"colorGroupName" : "wisteria",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4ECF7"
},
{
"id": 2,
"colorHexValue":"E8DAEF"
},
{
"id": 3,
"colorHexValue":"D2B4DE"
},
{
"id": 4,
"colorHexValue":"BB8FCE"
},
{
"id": 5,
"colorHexValue":"A569BD"
},
{
"id": 6,
"colorHexValue":"8E44AD"
},
{
"id": 7,
"colorHexValue":"7D3C98"
},
{
"id": 8,
"colorHexValue":"6C3483"
},
{
"id": 9,
"colorHexValue":"5B2C6F"
},
{
"id": 10,
"colorHexValue":"4A235A"
}
]
},
{
"colorGroupName" : "belize",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAF2F8"
},
{
"id": 2,
"colorHexValue":"D4E6F1"
},
{
"id": 3,
"colorHexValue":"A9CCE3"
},
{
"id": 4,
"colorHexValue":"7FB3D5"
},
{
"id": 5,
"colorHexValue":"5499C7"
},
{
"id": 6,
"colorHexValue":"2980B9"
},
{
"id": 7,
"colorHexValue":"2471A3"
},
{
"id": 8,
"colorHexValue":"1F618D"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"154360"
}
]
},
{
"colorGroupName" : "river",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBF5FB"
},
{
"id": 2,
"colorHexValue":"D6EAF8"
},
{
"id": 3,
"colorHexValue":"AED6F1"
},
{
"id": 4,
"colorHexValue":"85C1E9"
},
{
"id": 5,
"colorHexValue":"5DADE2"
},
{
"id": 6,
"colorHexValue":"3498DB"
},
{
"id": 7,
"colorHexValue":"2E86C1"
},
{
"id": 8,
"colorHexValue":"21618C"
},
{
"id": 9,
"colorHexValue":"1A5276"
},
{
"id": 10,
"colorHexValue":"1B4F72"
}
]
},
{
"colorGroupName" : "ocean",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F8F5"
},
{
"id": 2,
"colorHexValue":"D1F2EB"
},
{
"id": 3,
"colorHexValue":"A3E4D7"
},
{
"id": 4,
"colorHexValue":"76D7C4"
},
{
"id": 5,
"colorHexValue":"48C9B0"
},
{
"id": 6,
"colorHexValue":"1ABC9C"
},
{
"id": 7,
"colorHexValue":"17A589"
},
{
"id": 8,
"colorHexValue":"148F77"
},
{
"id": 9,
"colorHexValue":"117864"
},
{
"id": 10,
"colorHexValue":"0E6251"
}
]
},
{
"colorGroupName": "nephritis",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E8F6F3"
},
{
"id": 2,
"colorHexValue":"D0ECE7"
},
{
"id": 3,
"colorHexValue":"A2D9CE"
},
{
"id": 4,
"colorHexValue":"73C6B6"
},
{
"id": 5,
"colorHexValue":"45B39D"
},
{
"id": 6,
"colorHexValue":"16A085"
},
{
"id": 7,
"colorHexValue":"138D75"
},
{
"id": 8,
"colorHexValue":"117A65"
},
{
"id": 9,
"colorHexValue":"0E6655"
},
{
"id": 10,
"colorHexValue":"0B5345"
}
]
},
{
"colorGroupName": "emerald",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"E9F7EF"
},
{
"id": 2,
"colorHexValue":"D4EFDF"
},
{
"id": 3,
"colorHexValue":"A9DFBF"
},
{
"id": 4,
"colorHexValue":"7DCEA0"
},
{
"id": 5,
"colorHexValue":"52BE80"
},
{
"id": 6,
"colorHexValue":"27AE60"
},
{
"id": 7,
"colorHexValue":"229954"
},
{
"id": 8,
"colorHexValue":"1E8449"
},
{
"id": 9,
"colorHexValue":"196F3D"
},
{
"id": 10,
"colorHexValue":"145A32"
}
]
},
{
"colorGroupName": "sunflower",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EAFAF1"
},
{
"id": 2,
"colorHexValue":"D5F5E3"
},
{
"id": 3,
"colorHexValue":"ABEBC6"
},
{
"id": 4,
"colorHexValue":"82E0AA"
},
{
"id": 5,
"colorHexValue":"58D68D"
},
{
"id": 6,
"colorHexValue":"2ECC71"
},
{
"id": 7,
"colorHexValue":"28B463"
},
{
"id": 8,
"colorHexValue":"239B56"
},
{
"id": 9,
"colorHexValue":"1D8348"
},
{
"id": 10,
"colorHexValue":"186A3B"
}
]
},
{
"colorGroupName": "orange",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FCF3CF"
},
{
"id": 3,
"colorHexValue":"F9E79F"
},
{
"id": 4,
"colorHexValue":"F7DC6F"
},
{
"id": 5,
"colorHexValue":"F4D03F"
},
{
"id": 6,
"colorHexValue":"F1C40F"
},
{
"id": 7,
"colorHexValue":"D4AC0D"
},
{
"id": 8,
"colorHexValue":"B7950B"
},
{
"id": 9,
"colorHexValue":"9A7D0A"
},
{
"id": 10,
"colorHexValue":"7D6608"
}
]
},
{
"colorGroupName":"carrot",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FEF9E7"
},
{
"id": 2,
"colorHexValue":"FDEBD0"
},
{
"id": 3,
"colorHexValue":"FAD7A0"
},
{
"id": 4,
"colorHexValue":"F8C471"
},
{
"id": 5,
"colorHexValue":"F5B041"
},
{
"id": 6,
"colorHexValue":"F39C12"
},
{
"id": 7,
"colorHexValue":"D68910"
},
{
"id": 8,
"colorHexValue":"B9770E"
},
{
"id": 9,
"colorHexValue":"9C640C"
},
{
"id": 10,
"colorHexValue":"7E5109"
}
]
},
{
"colorGroupName": "pumpkin",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"FDF2E9"
},
{
"id": 2,
"colorHexValue":"FAE5D3"
},
{
"id": 3,
"colorHexValue":"F5CBA7"
},
{
"id": 4,
"colorHexValue":"F0B27A"
},
{
"id": 5,
"colorHexValue":"EB984E"
},
{
"id": 6,
"colorHexValue":"E67E22"
},
{
"id": 7,
"colorHexValue":"CA6F1E"
},
{
"id": 8,
"colorHexValue":"AF601A"
},
{
"id": 9,
"colorHexValue":"935116"
},
{
"id": 10,
"colorHexValue":"784212"
}
]
},
{
"colorGroupName": "concrete",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F4F6F6"
},
{
"id": 2,
"colorHexValue":"EAEDED"
},
{
"id": 3,
"colorHexValue":"D5DBDB"
},
{
"id": 4,
"colorHexValue":"BFC9CA"
},
{
"id": 5,
"colorHexValue":"AAB7B8"
},
{
"id": 6,
"colorHexValue":"95A5A6"
},
{
"id": 7,
"colorHexValue":"839192"
},
{
"id": 8,
"colorHexValue":"717D7E"
},
{
"id": 9,
"colorHexValue":"5F6A6A"
},
{
"id": 10,
"colorHexValue":"4D5656"
}
]
},
{
"colorGroupName": "asbestos",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"F2F4F4"
},
{
"id": 2,
"colorHexValue":"E5E8E8"
},
{
"id": 3,
"colorHexValue":"CCD1D1"
},
{
"id": 4,
"colorHexValue":"B2BABB"
},
{
"id": 5,
"colorHexValue":"99A3A4"
},
{
"id": 6,
"colorHexValue":"7F8C8D"
},
{
"id": 7,
"colorHexValue":"707B7C"
},
{
"id": 8,
"colorHexValue":"616A6B"
},
{
"id": 9,
"colorHexValue":"515A5A"
},
{
"id": 10,
"colorHexValue":"424949"
}
]
},
{
"colorGroupName": "asphalt",
"colorGroup" : [
{
"id": 1,
"colorHexValue":"EBEDEF"
},
{
"id": 2,
"colorHexValue":"D6DBDF"
},
{
"id": 3,
"colorHexValue":"AEB6BF"
},
{
"id": 4,
"colorHexValue":"85929E"
},
{
"id": 5,
"colorHexValue":"5D6D7E"
},
{
"id": 6,
"colorHexValue":"34495E"
},
{
"id": 7,
"colorHexValue":"2E4053"
},
{
"id": 8,
"colorHexValue":"283747"
},
{
"id": 9,
"colorHexValue":"212F3C"
},
{
"id": 10,
"colorHexValue":"1B2631"
}
]
}
]
Selected hex value appears in input
Validation works as the user modifies the hex value. The user cannot enter in more than 6 characters. If the user enters any value that is NOT 3 or 6 characters long, the input will highlight in red and show a inline error message
User can enter in their own custom hex value and it will appear in the box below.
What were my contributions?
- Provided the HTML, CSS/SASS, and Angular code