Wowdash - Bootstrap 5 Admin Dashboard HTML Template

Colors

Dashboard
-
Components / Colors

Shades

100 #FFFFFF

100 #111827

Neutral

50 #FAFAFA

100 #F5F5F5

200 #E5E5E5

300 #D4D4D4

400 #A3A3A3

500 #737373

600 #525252

700 #404040

800 #262626

900 #171717

Primary Color

50 #E4F1FF

100 #BFDCFF

200 #95C7FF

300 #6BB1FF

400 #519FFF

500 #458EFF

600 #487FFF

700 #486CEA

800 #4759D6

900 #4536B6

Error Color

50 #FEF2F2

100 #FEE2E2

200 #FECACA

300 #FCA5A5

400 #F87171

500 #EF4444

600 #DC2626

700 #B91C1C

800 #991B1B

900 #7F1D1D

Success Color

50 #F0FDF4

100 #DCFCE7

200 #BBF7D0

300 #86EFAC

400 #4ADE80

500 #22C55E

600 #16A34A

700 #15803D

800 #166534

900 #14532D

Warning Color

50 #FEFCE8

100 #FEF9C3

200 #FEF08A

300 #FDE047

400 #FACC15

500 #EAB308

600 #CA8A04

700 #A16207

800 #854D0E

900 #713F12

Info Color

50 #EFF6FF

100 #DBEAFE

200 #BFDBFE

300 #93C5FD

400 #60A5FA

500 #3B82F6

600 #2563EB

700 #1D4ED8

800 #1E40AF

900 #1E3A8A

<script> // =========================== Copy Color Code when click on box Js Start ================================ $(".color-box").click(function() { var clipboardText = $(this).find("[data-clipboard-text]").attr("data-clipboard-text"); // Create a temporary input element to hold the text to copy var tempInput = $("<input>"); $("body").append(tempInput); tempInput.val(clipboardText).select(); // Copy the text to the clipboard document.execCommand("copy"); // Remove the temporary input element tempInput.remove(); // Remove any existing badge $(this).find(".copied-message").remove(); // Create the notification badge var $badge = $(`<span class="copied-message text-xs badge bg-success-main py-8 px-12 fw-normal rounded-pill position-absolute start-50 translate-middle-x top-0 mt-24"> Copied! </span>`) // Append the badge to the color box $(this).append($badge); // Show the badge and then fade it out $badge.fadeIn().delay(800).fadeOut(function() { $(this).remove(); }); }); // =========================== Copy Color Code when click on box Js End ================================ </script>