DEV Community

Cover image for Nice Froala colour palette
MarWelz
MarWelz

Posted on

1 1

Nice Froala colour palette

Hi!
I'd like to share a reasonable palette for the color picker of 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,
Enter fullscreen mode Exit fullscreen mode

Cheers!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay