Instalation

Install Colorcrafts from your terminal via npm or yarn.

# With yarn
yarn add --dev colorcrafts

# With npm
npm install colorcrafts --save-dev

Basic Configuration

If you using library CSS-in-JS like Stitches, etc. You can use a configuration like this.

Stitches :

import { createStitches } from "@stitches/react";
import * as Colors from "colorcrafts";

export const { getCssText, globalCss, styled } = createStitches({
  theme: {
    colors: {
      ...Colors.Amber,
      ...Colors.Aquamarine,
      ...Colors.Black,
      ...Colors.Blue,
      ...Colors.Blue,
      ...Colors.Citrus,
      ...Colors.Cyan,
      ...Colors.Emerald,
      ...Colors.ForestGreen,
      ...Colors.Fuchsia,
      ...Colors.Gray,
      /* ... */
    },
    fonts: {},
    fontSizes: {},
    sizes: {},
  },
  media: {},
});



/** ==== | HOW TO USING | ==== */

export const ColorSwatch = styled("div", {
  padding: "0.875rem 0.5rem",
  color: "$gray-800",
  cursor: "pointer",
});

/** ========================= */

Tailwindcss :

const Colors = require("colorcrafts");

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      ...Colors.Blue,
      ...Color.White,
    },
  },
  plugins: [],
};



/** ==== | HOW TO USING | ==== */

<div className="bg-blue-900 text-white-800">
  colorcrafts so awesome ✨
</div>

/** ========================= */

Color Pallete

Color Palettes for Designer and Artist. ✨

#F1F5F9

#E2E8F0

#CBD5E1

#94A3B8

#64748B

#475569

#334155

#1E293B

#0F172A

Slate

#F3F4F6

#E5E7EB

#D1D5DB

#9CA3AF

#6B7280

#4B5563

#374151

#1F2937

#111827

Gray

#F4F4F5

#E4E4E7

#D4D4D8

#A1A1AA

#71717A

#52525B

#3F3F46

#27272A

#18181B

Zinc

#F5F5F5

#E5E5E5

#D4D4D4

#A3A3A3

#737373

#525252

#404040

#262626

#171717

Neutral

#F5F5F4

#E7E5E4

#D6D3D1

#A8A29E

#78716C

#57534E

#44403C

#292524

#1C1917

Stone

#FEE2E2

#FECACA

#FCA5A5

#F87171

#EF4444

#DC2626

#B91C1C

#991B1B

#7F1D1D

Red

#FFEDD5

#FED7AA

#FDBA74

#FB923C

#F97316

#EA580C

#C2410C

#9A3412

#7C2D12

Orange

#FEF3C7

#FDE68A

#FCD34D

#FBBF24

#F59E0B

#D97706

#B45309

#92400E

#78350F

Amber

#FEF9C3

#FEF08A

#FDE047

#FACC15

#EAB308

#CA8A04

#A16207

#854D0E

#713F12

Yellow

#ECFCCB

#D9F99D

#BEF264

#A3E635

#84CC16

#65A30D

#4D7C0F

#3F6212

#365314

Lime

#DCFCE7

#BBF7D0

#86EFAC

#4ADE80

#22C55E

#16A34A

#15803D

#166534

#14532D

Green

#D1FAE5

#A7F3D0

#6EE7B7

#34D399

#10B981

#059669

#047857

#065F46

#064E3B

Emerald

#CCFBF1

#99F6E4

#5EEAD4

#2DD4BF

#14B8A6

#0D9488

#0F766E

#115E59

#134E4A

Teal

#CFFAFE

#A5F3FC

#67E8F9

#22D3EE

#06B6D4

#0891B2

#0E7490

#155E75

#164E63

Cyan

#E0F2FE

#BAE6FD

#7DD3FC

#38BDF8

#0EA5E9

#0284C7

#0369A1

#075985

#0C4A6E

Sky

#DBEAFE

#BFDBFE

#93C5FD

#60A5FA

#3B82F6

#2563EB

#1D4ED8

#1E40AF

#1E3A8A

Blue

#E0E7FF

#C7D2FE

#A5B4FC

#818CF8

#6366F1

#4F46E5

#4338CA

#3730A3

#312E81

Indigo

#EDE9FE

#DDD6FE

#C4B5FD

#A78BFA

#8B5CF6

#7C3AED

#6D28D9

#5B21B6

#4C1D95

Violet

#F3E8FF

#E9D5FF

#D8B4FE

#C084FC

#A855F7

#9333EA

#7E22CE

#6B21A8

#581C87

Purple

#FAE8FF

#F5D0FE

#F0ABFC

#E879F9

#D946EF

#C026D3

#A21CAF

#86198F

#701A75

Fuchsia

#FCE7F3

#FBCFE8

#F9A8D4

#F472B6

#EC4899

#DB2777

#BE185D

#9D174D

#831843

Pink

#FFE4E6

#FECDD3

#FDA4AF

#FB7185

#F43F5E

#E11D48

#BE123C

#9F1239

#881337

Rose

#7DE3D2

#69D8C6

#44CFB8

#38BCA6

#2DA995

#209784

#0F7B69

#086858

#004D40

Aquamarine

#FFC875

#FFB13D

#F3A32B

#FFA31A

#FF9900

#EB8D00

#D68100

#C27400

#A36200

Citrus

#82DDE3

#30CED9

#2DC2CD

#22B4BF

#21A6B0

#1B98A1

#12848C

#087078

#026269

ForestGreen

#FFDE8A

#FFCE52

#FFC42E

#FFBD14

#F0AC00

#E0A100

#C28B00

#AD7C00

#A87900

Rusty

#4F4F4F

#4D4D4D

#424242

#3D3D3D

#333333

#2B2B2B

#1F1F1F

#1A1A1A

#0D0D0D

Black

#FAFAFA

#E6E6E6

#D9D9D9

#CFCFCF

#C2C2C2

#B5B5B5

#ABABAB

#9C9C9C

#949494

White

#CAF0F8

#ADE8F4

#90E0EF

#48CAE4

#00B4D8

#0096C7

#0077B6

#023E8A

#03045E

Midnight Blue

NEW

#20BAC5

#00B2CA

#04A6C2

#0899BA

#0F80AA

#16679A

#1A5B92

#1C558E

#1D4E89

Yale Blue

NEW

#5BEFDD

#66E3DF

#70D7E0

#7BCBE2

#85C0E3

#90B4E5

#9AA8E6

#A59CE8

#AF90E9

Floral

NEW

#F72585

#D61E92

#B5179E

#A514A5

#9410AB

#7209B7

#640AB2

#560BAD

#480CA8

Trypan

NEW

#E6FFE6

#CCFFCC

#99FF99

#66FF66

#00FF00

#00E600

#00CC00

#00B300

#009900

Slimy Green

NEW