Default colors
This topic contains default colors for components of rating scales.
Rating scales
The following are the default HEX color codes for all rating scales except squares:
- On — #5985f7
-
Hover — #4769c5
-
Selected — #5985f7
The following are the default HEX color codes for square rating scales:
- On — #3d64cc
-
Hover — #2b4aa0
-
Selected — #3d64cc
The following are default HEX color codes for unselected buttons in rating scales:
- Background — #D4D4D4
-
Text — #313139
.neb-rating-html-implementation neb-rating .neb-rating.numbers
label.rating-label,
.neb-rating-html-implementation neb-rating .neb-rating.numbersCircle
label.rating-label,
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label {
height: 29px; /* adjust height but add !important to activate it or this setting is ignored */
width: 29px; /* adjust width but add !important to activate it or this setting is ignored */
background: #D4D4D4 !important /* background color*/
color: #313139 !important' /* text color unselected */
font-weight: 400;
border-radius: 100%;
- Background — #5985F7
-
Text — #FFFFFF
.neb-rating-html-implementation neb-rating .neb-rating.numbers
label.rating-label.on, .neb-rating-implementation neb-rating
.neb-rating.numbersCircle label.rating-label.on,
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label.on {
background: #5985F7
color: #FFF !important; }
- Background — #4769C5
- Text — #FFFFFF
.neb-rating-html-implementation neb-rating .neb-rating.numbers
label.rating-label.hover, .neb-rating-implementation neb-rating
.neb-rating.numbersCircle label.rating-label.hover,
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label.hover {
background: #4769C5;
color: #FFF !important; ]
- Border — #4769C5
-
Background — #5985F7
.neb-rating.numbersCircle label.rating-label.selected,
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label {
background: #5985F7;
color: #FFF !important'
background: #5985F7;
background: radial-gradient(ellipse at center, #5985F7 60%, #4769C5 62%);
background: -webkit-radial-gradient(center, ellipse cover, #5985F7 60%, #4769C5 62%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$core-color', endColorstr=$border-color', GradientType=1); }
- Border — #2B4AA0
- Background — #3D64CC
/* set color for ON */
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label.on {
background: #3d64cc; }
/* set color for hover */
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label.rating-label.hover {
background: #2b4aa0; }
/* set color of selected(accumulative) or during selection(singleselect) */
/* of each border (bottom,left, top, right) and very last attribute is background color */
.neb-rating-html-implementation neb-rating .neb-rating.numbersSquare
.neb-rating-value label,rating-label.selected {
background: linear-gradient(0deg, ##2B4AA0 6%, transparent 0%), linear-gradient(90deg, #2B4AA0 6% transparent 0%), linear-gradient(180deg, #2B4AA0 6%, transparent 0%), linear-gradient(270deg, #2B4AA0 6%, transparent 0%), #3D64CC;
background: -webkit-linear-gradient(90deg, ##2B4AA0 6%, transparent 0%), linear-gradient(90deg, #2B4AA0 6% transparent 0%), linear-gradient(180deg, #2B4AA0 6%, transparent 0%), linear-gradient(270deg, #2B4AA0 6%, transparent 0%), #3D64CC; }
NPS circle colors (traffic light style)
Circles 0-6
The following are the default HEX color codes for unselected circles:
- Background — #D4D4D4
-
Text — #313139
The following is the default HEX color code for circles that are hovered over:
- Background: #902F16
/* background-color of 0-6 HOVER */
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover {
background: #902F16; }
The following is the default HEX color code for on circles:
- Background — #B3391C
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover {
background: #B3391C; }
The following are the default HEX color codes for selected circles:
- Background — #B3391C
-
Border — #902F16
/* background, border color of 0-6 SELECTED */
.neb-rating-html-implementation neb-rating:not(grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.selected {
background: #B3391C;
background: radial-gradient(ellipse at center, #B3391C 60%, #902F16 62%);
background: -webkit-radial-gradient(center, ellipse cover, #B3391C 60%, #902F16 62%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$core-color', endColorstr=$border-color', GradientType=1); }
Circles 7-8
The following are the default HEX color codes for unselected circles:
- Background — #D4D4D4
- Text — #313139
The following is the default HEX color code for circles that are hovered over:
- Background: #808080
/* background-color of 7 & 7 HOVER */
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover.seven,
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover.eight
{
background: #808080; }
The following is the default HEX color code for on circles:
- Background — #A3A3A3
/* background-color of 7 & 8 ON*/
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.on.seven,
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.on.eight
{
background: #A3A3A3; }
The following is the default HEX color code for selected circles:
- Background — #A3A3A3
- Border — #808080
/* background, border color of 7 & 8 SELECTED */
.neb-rating-html-implementation neb-rating:not(grading)
.neb-rating.numbersCircle .neb-rating-value
label.rating-label.selected.seven, .neb-rating-html-implementation
neb-rating:(not(.grading) .neb-rating.numbersCircle .neb-rating-value
label.rating-label.selected.eight {
background: #A3A3A3;
background: radial-gradient(ellipse at center, #A3A3A3 60%, #808080 62%);
background: -webkit-radial-gradient(center, ellipse cover, #A3A3A3 60%, #808080 62%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$core-color', endColorstr=$border-color', GradientType=1); }
Circles 9-10
The following are the default HEX color codes for unselected circles:
- Background — #D4D4D4
- Text — #313139
The following is the default HEX color code for circles that are hovered over:
- Background — #4E642E
/* background-color of 9 & 10 HOVER */
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover.nine,
neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.hover.ten {
background: #4E642E; }
The following is the default HEX color code for on circles:
- Background — #6A883E
/* background-color of 9 & 10 ON*/
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.on.nine,
.neb-rating-html-implementation neb-rating:not(.grading)
.neb-rating.numbersCircle .neb-rating-value label.rating-label.on.ten
{
background: #6A883E; }
The following are default HEX color codes for selected circles:
- Background — #6A883E
- Border — #4E642E
/* background, border color of 9 & 10 SELECTED */
.neb-rating-html-implementation neb-rating:not(grading)
.neb-rating.numbersCircle .neb-rating-value
label.rating-label.selected.seven, .neb-rating-html-implementation
neb-rating:(not(.grading) .neb-rating.numbersCircle .neb-rating-value
label.rating-label.selected.ten {
background: #6A883E;
background: radial-gradient(ellipse at center, #6A883E 60%, #4E642E 62%);
background: -webkit-radial-gradient(center, ellipse cover, #6A883E 60%, #4E642E 62%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$core-color', endColorstr=$border-color', GradientType=1); }