Default colors

This topic contains default colors for components of rating scales.

Note: Use the global replace function in a text editor to change these HEX codes to a custom HEX code color.

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 #D4D4D4
  • Text — #313139 #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%;
The following are default HEX color codes for on buttons in rating scales:
  • Background — #5985F7 #5985F7
  • Text — #FFFFFF #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; }
The following are default HEX color codes for background and text colors of hover buttons in rating scales:
  • Background — #4769C5 #4769C5
  • Text — #FFFFFF #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; ]
The following are default HEX color codes for borders and background colors of selected circular buttons in rating scales:
  • Border — #4769C5 #4769C5
  • Background — #5985F7 #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); } 
The following are default HEX color codes for border and background colors of selected square buttons in a rating scale:
  • Border — #2B4AA0 #2B4AA0
  • Background — #3D64CC #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)

NPS rating scale with circles, showing circles 0-6 selected.

Circles 0-6

The following are the default HEX color codes for unselected circles:

  • Background — #D4D4D4 #D4D4D4
  • Text — #313139 #313139

The following is the default HEX color code for circles that are hovered over:

  • Background: #902F16 #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 #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 #B3391C
  • Border — #902F16 #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 #D4D4D4
  • Text — #313139 #313139

The following is the default HEX color code for circles that are hovered over:

  • Background: #808080 #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 #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 #A3A3A3
  • Border — #808080 #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 #D4D4D4
  • Text — #313139 #313139

The following is the default HEX color code for circles that are hovered over:

  • Background — #4E642E #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 #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 #6A883E
  • Border — #4E642E #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); }