Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application.
Blueprint Colors Usage:
- Blueprint in Sass: Blueprint colors are used in Sass scripting language which is a preprocessor style sheet language compiled into CSS.
- Blueprint in Less: Blueprint colors are used in Less which is a dynamic preprocessor style sheet language compiled into CSS.
- Blueprint in JavaScript: Blueprint colors are used in JavaScript as Blueprint is React based library which uses JavaScript.
1. Gray scale: Grayscale colors are different shades of gray color available to design web pages. This is discussed in this article.
2. Core colors: The core colors are used in user interface design and each color is linked to what we call a visual intent. This is discussed in this article.
3. Extended colors: We use extended colors when we need to represent some kind of data. So basically it is reserved for data visualization.
Syntax:
<div style={{ backgroundColor: "#96290D" }}>...</div> <h1 style={{ color: "#DB2C6F" }}>...</h1>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. app name, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: Below example demonstrates the usage of Extended color as the background color.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; function App() { return ( <> <div> <h1> ReactJS BluePrint Colors Extended colors </h1> </div> <div style={{ display: "flex" , flexDirection: "row" }}> <div style={{ color: "black" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#96290D" , color: "white" , }} > Vermilion -1 </div> <div style={{ padding: 10, backgroundColor: "#B83211" , color: "white" , }} > Vermilion -2 </div> <div style={{ padding: 10, backgroundColor: "#D33D17" }}> Vermilion -3 </div> <div style={{ padding: 10, backgroundColor: "#EB6847" }}> Vermilion -4 </div> <div style={{ padding: 10, backgroundColor: "#FF9980" }}> Vermilion -5 </div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#A82255" , color: "white" , }} > Rose -1 </div> <div style={{ padding: 10, backgroundColor: "#C22762" , color: "white" , }} > Rose -2 </div> <div style={{ padding: 10, backgroundColor: "#DB2C6F" }}>Rose -3</div> <div style={{ padding: 10, backgroundColor: "#F5498B" }}>Rose -4</div> <div style={{ padding: 10, backgroundColor: "#FF66A1" }}>Rose -5</div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#5C255C" , color: "white" , }} > Voilet-1 </div> <div style={{ padding: 10, backgroundColor: "#7C327C" , color: "white" , }} > Voilet-2 </div> <div style={{ padding: 10, backgroundColor: "#9D3F9D" }}> Voilet-3 </div> <div style={{ padding: 10, backgroundColor: "#BD6BBD" }}> Voilet-4 </div> <div style={{ padding: 10, backgroundColor: "#D69FD6" }}> Voilet-5 </div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#5642A6" , color: "white" , }} > Indigo-1 </div> <div style={{ padding: 10, backgroundColor: "#634DBF" , color: "white" , }} > Indigo-2 </div> <div style={{ padding: 10, backgroundColor: "#7961DB" }}> Indigo-3 </div> <div style={{ padding: 10, backgroundColor: "#9881F3" }}> Indigo-4 </div> <div style={{ padding: 10, backgroundColor: "#BDADFF" }}> Indigo-5 </div> </div> </div> </div> </> ); } export default App; |
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Example 2: Below example demonstrates the usage of Extended color as the text typography color.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; function App() { return ( <> <div style={{ padding: 20, color: "green" }}> <h1>ReactJS BluePrint Colors Extended Colors</h1> </div> <div> <div style={{ padding: 20, display: "flex" , flexDirection: "row" }}> <div style={{ padding: 10 }}> <h1 style={{ color: "#0C5174" }}> Cerulean color 1 </h1> <h2 style={{ color: "#0F6894" }}> Cerulean color 2 </h2> <h3 style={{ color: "#147EB3" }}> Cerulean color 3 </h3> <h4 style={{ color: "#3FA6DA" }}> Cerulean color 4 </h4> <h5 style={{ color: "#68C1EE" }}> Cerulean color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#004D46" }}> Turquoise color 1 </h1> <h2 style={{ color: "#007067" }}> Turquoise color 2 </h2> <h3 style={{ color: "#00A396" }}> Turquoise color 3 </h3> <h4 style={{ color: "#13C9BA" }}> Turquoise color 4 </h4> <h5 style={{ color: "#7AE1D8" }}> Turquoise color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#1D7324" }}> Forest Color 1 </h1> <h2 style={{ color: "#238C2C" }}> Forest Color 2 </h2> <h3 style={{ color: "#29A634" }}> Forest Color 3 </h3> <h4 style={{ color: "#43BF4D" }}> Forest Color 4 </h4> <h5 style={{ color: "#62D96B" }}> Forest Color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#43501B" }}> Lime Color 1 </h1> <h2 style={{ color: "#5A701A" }}> Lime Color 2 </h2> <h3 style={{ color: "#8EB125" }}> Lime Color 3 </h3> <h4 style={{ color: "#B6D94C" }}> Lime Color 4 </h4> <h5 style={{ color: "#D4F17E" }}> Lime Color 5 </h5> </div> </div> </div> </> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors