Paleta de colores basado en Material Design

Clic en un color para copiar al portapapeles

Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Ywllow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey
md-red-50
md-pink-50
md-purple-50
md-deep-purple-50
md-indigo-50
md-blue-50
md-light-blue-50
md-cyan-50
md-teal-50
md-green-50
md-light-green-50
md-lime-50
md-yellow-50
md-amber-50
md-orange-50
md-deep-orange-50
md-brown-50
md-grey-50
md-blue-grey-50
md-red-100
md-pink-100
md-purple-100
md-deep-purple-100
md-indigo-100
md-blue-100
md-light-blue-100
md-cyan-100
md-teal-100
md-green-100
md-light-green-100
md-lime-100
md-yellow-100
md-amber-100
md-orange-200
md-deep-orange-100
md-brown-100
md-grey-100
md-blue-grey-100
md-red-200
md-pink-200
md-purple-200
md-deep-purple-200
md-indigo-200
md-blue-200
md-light-blue-200
md-cyan-200
md-teal-200
md-green-200
md-light-green-200
md-lime-200
md-yellow-200
md-amber-200
md-orange-200
md-deep-orange-200
md-brown-200
md-grey-200
md-blue-grey-200
md-red-300
md-pink-300
md-purple-300
md-deep-purple-300
md-indigo-300
md-blue-300
md-light-blue-300
md-cyan-300
md-teal-300
md-green-300
md-light-green-300
md-lime-300
md-yellow-300
md-amber-300
md-orange-300
md-deep-orange-300
md-brown-300
md-grey-300
md-blue-grey-300
md-red-400
md-pink-400
md-purple-400
md-deep-purple-400
md-indigo-400
md-blue-400
md-light-blue-400
md-cyan-400
md-teal-400
md-green-400
md-light-green-400
md-lime-400
md-yellow-400
md-amber-400
md-orange-400
md-deep-orange-400
md-brown-400
md-grey-400
md-blue-grey-400
md-red-500
md-pink-500
md-purple-500
md-deep-purple-500
md-indigo-500
md-blue-500
md-light-blue-500
md-cyan-500
md-teal-500
md-green-500
md-light-green-500
md-lime-500
md-yellow-500
md-amber-500
md-orange-500
md-deep-orange-500
md-brown-500
md-grey-500
md-blue-grey-500
md-red-600
md-pink-600
md-purple-600
md-deep-purple-600
md-indigo-600
md-blue-600
md-light-blue-600
md-cyan-600
md-teal-600
md-green-600
md-light-green-600
md-lime-600
md-yellow-600
md-amber-600
md-orange-600
md-deep-orange-600
md-brown-600
md-grey-600
md-blue-grey-600
md-red-700
md-pink-700
md-purple-700
md-deep-purple-700
md-indigo-700
md-blue-700
md-light-blue-700
md-cyan-700
md-teal-700
md-green-700
md-light-green-700
md-lime-700
md-yellow-700
md-amber-700
md-orange-700
md-deep-orange-700
md-brown-700
md-grey-700
md-blue-grey-700
md-red-800
md-pink-800
md-purple-800
md-deep-purple-800
md-indigo-800
md-blue-800
md-light-blue-800
md-cyan-800
md-teal-800
md-green-800
md-light-green-800
md-lime-800
md-yellow-800
md-amber-800
md-orange-800
md-deep-orange-800
md-brown-800
md-grey-800
md-blue-grey-800
md-red-900
md-pink-900
md-purple-900
md-deep-purple-900
md-indigo-900
md-blue-900
md-light-blue-900
md-cyan-900
md-teal-900
md-green-900
md-light-green-900
md-lime-900
md-yellow-900
md-amber-900
md-orange-900
md-deep-orange-900
md-brown-900
md-grey-900
md-blue-grey-900

Check it out!

These are SVG's. They can inherit colors just like a font!

These are png's. Easier to work with than SVG's, but less adaptable.

These are also png's.

Credit | Hand Drawn Arrows | Figma Community →
Top
left
Right
Bottom
Top
left
Right
Bottom
Top
left
Right
Bottom
This is a label with a info button
i
This is the first half of a paragraph.
, and this is the second half of a paragraph.

FAQ

Show/hide tooltips in the designer?

I recommend creating a div with the lass .tooltip-anchor. After that, you're free to change the display state and delete the element.