color validator

Validate a color in different formats

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
messagedata-fv-color___messageStringThe error message
typedata-fv-color___typeString or String[]
The type option can be one of supported types listed below
  • Array of supported types
  • A string consists of supported types, separated by a comma
Using with ES6 module
// You might need to change the importing path
import color from 'formvalidation/dist/es6/validators/color';
const result = color().validate({
value: ...,
options: {
type: ...,
message: ...,
},
});
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/

Supported types

Following is the list of supported types:
TypeSample
hex#0000FF, #00F
hslhsl(120, 50%, 50%)
hslahsla(120, 50%, 50%, 1)
keywordtransparent
rgbrgb(255, 255, 255)
rgbargba(255, 255, 255, 1)
The keyword type accepts the following colors:
Starting withColors
Aaliceblue, antiquewhite, aqua, aquamarine, azure
Bbeige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood
Ccadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan
Ddarkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue
Ffirebrick, floralwhite, forestgreen, fuchsia
Ggainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey
Hhoneydew, hotpink
Iindianred, indigo, ivory
Kkhaki
Llavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen
Mmagenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin
Nnavajowhite, navy
Ooldlace, olive, olivedrab, orange, orangered, orchid
Ppalegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple
Rred, rosybrown, royalblue
Ssaddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue
Ttan, teal, thistle, tomato, transparent, turquoise
Vviolet
Wwheat, white, whitesmoke
Yyellow, yellowgreen

Basic example

Basic example

HTML5 Example

When the Declarative plugin is used, the color validator will be turned on automatically if the input uses HTML 5 type="color" attribute
According to the W3C specification, the color input only accepts 6 hex character values. 3 hex character values as #FFF is not valid.
HTML5 example

ES6 Module Example

The following snippet shows how to use the color validator with ES6 module:
// You might need to change the importing path
import color from 'formvalidation/dist/es6/validators/color';
const res1 = color().validate({
value: '#0000FF',
options: {
type: 'hex',
message: 'The value is not valid color',
},
});
// res1.valid === true
const res2 = color().validate({
value: 'hsl (120,50%,50%)',
options: {
type: 'hsl',
message: 'The value is not valid color',
},
});
// res2.valid === false
const res3 = color().validate({
value: 'blue',
options: {
type: 'keyword',
message: 'The value is not valid color',
},
});
// res3.valid === true

See also