Nice Froala colour palette

nice-froala-colour-palette

Hi!
I’d like to share a reasonable colour palette for the Froala HTML editor component with you.
It has twelve hues with five different brightnesses each, and all are fully saturated. Furthermore it has a greyscale from white to black with three intermediate shades of grey. I like it much more than the default.

Just add this to the object in the second parameter when calling “new FroalaEditor()”

colorsBackground: [
  '#FECCCC','#FEEBCC','#FEFECC','#F2FECC','#CCFECC','#CCFEEE','#CCFEFE','#CCEDFE','#CCCCFE','#EECCFE','#FECCFE','#FECCE5','#FFFFFF',
  '#FF8A8A','#FFD38A','#FEFF8A','#E1FF8A','#8AFF8A','#8AFFD8','#8AFEFF','#8AD8FF','#8A8AFF','#D88AFF','#FF8AFE','#FF8AC4','#D9D9D9',
  '#FF0000','#FF9F00','#FEFF00','#BFFF00','#00FF00','#00FFAA','#00FEFF','#00A9FF','#0000FF','#AA00FF','#FF00FE','#FF007F','#9F9F9F',
  '#BF0000','#BF7700','#BFBF00','#8FBF00','#00BF00','#00BF7F','#00BFBF','#007FBF','#0000BF','#7F00BF','#BF00BF','#BF005F','#5F5F5F',
  '#6A0000','#6A4200','#6A6A00','#4F6A00','#006A00','#006A46','#006A6A','#00466A','#00006A','#46006A','#6A006A','#6A0035','#000000',
  'REMOVE'
],
colorsText: [
  '#FECCCC','#FEEBCC','#FEFECC','#F2FECC','#CCFECC','#CCFEEE','#CCFEFE','#CCEDFE','#CCCCFE','#EECCFE','#FECCFE','#FECCE5','#FFFFFF',
  '#FF8A8A','#FFD38A','#FEFF8A','#E1FF8A','#8AFF8A','#8AFFD8','#8AFEFF','#8AD8FF','#8A8AFF','#D88AFF','#FF8AFE','#FF8AC4','#D9D9D9',
  '#FF0000','#FF9F00','#FEFF00','#BFFF00','#00FF00','#00FFAA','#00FEFF','#00A9FF','#0000FF','#AA00FF','#FF00FE','#FF007F','#9F9F9F',
  '#BF0000','#BF7700','#BFBF00','#8FBF00','#00BF00','#00BF7F','#00BFBF','#007FBF','#0000BF','#7F00BF','#BF00BF','#BF005F','#5F5F5F',
  '#6A0000','#6A4200','#6A6A00','#4F6A00','#006A00','#006A46','#006A6A','#00466A','#00006A','#46006A','#6A006A','#6A0035','#000000',
  'REMOVE'
],
tableColors: [
  '#FECCCC','#FEEBCC','#FEFECC','#F2FECC','#CCFECC','#CCFEEE','#CCFEFE','#CCEDFE','#CCCCFE','#EECCFE','#FECCFE','#FECCE5','#FFFFFF',
  '#FF8A8A','#FFD38A','#FEFF8A','#E1FF8A','#8AFF8A','#8AFFD8','#8AFEFF','#8AD8FF','#8A8AFF','#D88AFF','#FF8AFE','#FF8AC4','#D9D9D9',
  '#FF0000','#FF9F00','#FEFF00','#BFFF00','#00FF00','#00FFAA','#00FEFF','#00A9FF','#0000FF','#AA00FF','#FF00FE','#FF007F','#9F9F9F',
  '#BF0000','#BF7700','#BFBF00','#8FBF00','#00BF00','#00BF7F','#00BFBF','#007FBF','#0000BF','#7F00BF','#BF00BF','#BF005F','#5F5F5F',
  '#6A0000','#6A4200','#6A6A00','#4F6A00','#006A00','#006A46','#006A6A','#00466A','#00006A','#46006A','#6A006A','#6A0035','#000000',
  'REMOVE'
],
colorsStep: 13,
tableColorsStep: 13,

Cheers!

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
going-beyond-the-now-next-later-roadmap-with-phil-hornby

Going beyond the Now-Next-Later roadmap with Phil Hornby

Next Post
“attending-a-pma-summit-is-well-worth-the-investment!”-case-study-with-kelsey-lamastres

“Attending a PMA Summit is well worth the investment!” Case study with Kelsey LaMastres

Related Posts