color validator

Validate a color in different formats

Options

Use with form field

The HTML attributes are used to set the validator options via the Declarative plugin

Name HTML attribute Type Description
type data-fv-color___type String or String[]

The type of color. It can be:

  • One of supported types listed below
  • Array of supported types
  • A string consists of supported types, separated by a comma
message data-fv-color___message String The error message

Use with JavaScript module


// You might need to change the importing path
import color from 'formvalidation/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:

Type Sample Is it valid?
hex #0000FF
#00F
123
112233
#4567
hsl hsl(120,50%,50%)
hsl( 120 , 50% , 50% )
hsl( 120, 50%, 50% )
hsl(-120,50%,50%)
hsl(480,50%,50%)
hsl(10,-50%,50%)
hsl(10,50%,-50%)
120,50%,50%
hsl(120,100%,101%)
hsl (120,50%,50%)
hsl(50%, 50%, 100%)
hsl(120, 50, 100%)
hsl(120, 50%, 100)
hsla hsla(120,50%,50%,1)
hsla( 120 , 50% , 50%, 1 )
hsla( 120, 50%, 50% , 1 )
hsla(-120,50%,50%,1)
hsla(480,50%,50%,1)
hsla(120,50%,100%,0)
hsla(120,50%,100%,1)
hsla(120,50%,100%,0.5)
hsla(120,50%,100%,.5)
hsla(120,50%,100%,.524141)
hsla(120,50%,100%,50%)
hsla(120,50%,100%,2)
hsla(120,50%,100%,-1)
hsla(120,50%,100%,1.000000000001)
hsla(120,50%,100%,-0.5)
hsla(120,50%,100%,2.3)
hsla(10,-50%,50%,1)
hsla(10,50%,-50%,1)
120,50%,50%,1
hsla(120,100%,101%,1)
hsla (120,50%,50%,1)
hsla(50%, 50%, 100%,1)
hsla(120, 50, 100%,1)
hsla(120, 50%, 100,1)
keyword transparent
blue
blueviolet red
shady
blueish
rgb rgb(255,255,255)
rgb( 255 , 255 , 255 )
rgb( 255, 255, 255 )
rgb(100%,100%,100%)
rgb(255,255,100%)
rgb(-10,255,255)
rgb(-10%,100%,100%)
255,255,255
rgb(255,255,256)
rgb(100%,100%,101%)
rgb (255,255,255)
rgba rgba(255,255,255,1)
rgba( 255 , 255 , 255 , 1 )
rgba( 255 , 255 , 255 , 1 )
rgba(100%,100%,100%,1)
rgba(255,255,255,0)
rgba(255,255,255,0.5)
rgba(255,255,255,.5)
rgba(255,255,255,.524141)
rgba(100%,100%,100%,0)
rgba(100%,100%,100%,0.5)
rgba(100%,100%,100%,.5)
rgba(100%,100%,100%,.524141)
rgba(100%,100%,100%,50%)
rgba(255,255,255,2)
rgba(255,255,255,-1)
rgba(255,255,255,1.000000000001)
rgba(255,255,255,-0.5)
rgba(255,255,255,2.3)
rgba(255,255,100%,1)
rgba(-10,255,255,1)
rgba(-10%,100%,100%,1)
255,255,255,1
rgba(255,255,256),1
rgba(100%,100%,101%,1)
rgba (255,255,255,1)

The keyword type accepts the following colors:

Starting with Colors
A
aliceblue, antiquewhite, aqua, aquamarine, azure
B
beige, bisque, black, blanchedalmond, blue,
blueviolet, brown, burlywood
C
cadetblue, chartreuse, chocolate, coral, cornflowerblue,
cornsilk, crimson, cyan
D
darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen,
darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange,
darkorchid, darkred, darksalmon, darkseagreen, darkslateblue,
darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink,
deepskyblue, dimgray, dimgrey, dodgerblue
F
firebrick, floralwhite, forestgreen, fuchsia
G
gainsboro, ghostwhite, gold, goldenrod, gray,
green, greenyellow, grey
H
honeydew, hotpink
I
indianred, indigo, ivory
K
khaki
L
lavender, lavenderblush, lawngreen, lemonchiffon, lightblue,
lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen,
lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue,
lightslategray, lightslategrey, lightsteelblue, lightyellow,
lime, limegreen, linen
M
magenta, maroon, mediumaquamarine, mediumblue, mediumorchid,
mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen,
mediumturquoise, mediumvioletred, midnightblue, mintcream,
mistyrose, moccasin
N
navajowhite, navy
O
oldlace, olive, olivedrab, orange, orangered,
orchid
P
palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip,
peachpuff, peru, pink, plum, powderblue,
purple
R
red, rosybrown, royalblue
S
saddlebrown, salmon, sandybrown, seagreen, seashell,
sienna, silver, skyblue, slateblue, slategray,
slategrey, snow, springgreen, steelblue
T
tan, teal, thistle, tomato, transparent, turquoise
V
violet
W
wheat, white, whitesmoke
Y
yellow, yellowgreen

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.

Module Example

The following snippet shows how to use the color validator with JavaScript module:


// You might need to change the importing path
import color from 'formvalidation/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

Related validators

The following validators are similar to this one and might be useful to you.

Name Description
regexp Check if the value matches given JavaScript regular expression