React.js Blueprint Colors Core colors
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 Core 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. The core colors are used in user interface design and each color is linked to what we call a visual intent.
Blueprint Core Colors:
- Blue: This color is available in 5 different shades i.e. from Blue 1 to 5. Its intent is primary.
- Green: This color is available in 5 different shades i.e. from Green 1 to 5. Its intent is a success.
- Orange: This color is available in 5 different shades i.e. from Orange 1 to 5. Its intent is a warning.
- Red: This color is available in 5 different shades i.e. from Red 1 to 5. Its intent is danger.
Syntax:
<div style={{ backgroundColor: "#2D72D2" }}>...</div> <h1 style={{ color: "#77450D" }}>...</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. appname, 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 Core color as the background color.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; function App() { return ( <> <div style={{ padding: 20, textAlign: "center" , color: "green" }}> <h1> ReactJS BluePrint Colors Core colors </h1> </div> <div style={{ display: "flex" , flexDirection: "row" }}> <div style={{ color: "black" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#184A90" , color: "white" , }} > Blue -1 </div> <div style={{ padding: 10, backgroundColor: "#215DB0" , color: "white" , }} > Blue -2 </div> <div style={{ padding: 10, backgroundColor: "#2D72D2" }}> Blue -3 </div> <div style={{ padding: 10, backgroundColor: "#4C90F0" }}> Blue -4 </div> <div style={{ padding: 10, backgroundColor: "#8ABBFF" }}> Blue -5 </div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#8E292C" , color: "white" , }} > Red-1 </div> <div style={{ padding: 10, backgroundColor: "#AC2F33" , color: "white" , }} > Red-2 </div> <div style={{ padding: 10, backgroundColor: "#CD4246" }}>Red-3</div> <div style={{ padding: 10, backgroundColor: "#E76A6E" }}>Red-4</div> <div style={{ padding: 10, backgroundColor: "#FA999C" }}>Red-5</div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#165A36" , color: "white" , }} > Green-1 </div> <div style={{ padding: 10, backgroundColor: "#1C6E42" , color: "white" , }} > Green-2 </div> <div style={{ padding: 10, backgroundColor: "#238551" }}> Green-3 </div> <div style={{ padding: 10, backgroundColor: "#32A467" }}> Green-4 </div> <div style={{ padding: 10, backgroundColor: "#72CA9B" }}> Green-5 </div> </div> </div> <div style={{ color: "black" , textAlign: "left" , padding: 20 }}> <div style={{ padding: 10 }}> <div style={{ padding: 10, backgroundColor: "#77450D" , color: "white" , }} > Orange-1 </div> <div style={{ padding: 10, backgroundColor: "#935610" , color: "white" , }} > Orange-2 </div> <div style={{ padding: 10, backgroundColor: "#C87619" }}> Orange-3 </div> <div style={{ padding: 10, backgroundColor: "#EC9A3C" }}> Orange-4 </div> <div style={{ padding: 10, backgroundColor: "#FBB360" }}> Orange-5 </div> </div> </div> </div> </> ); } export default App; |
Output:
Example 2: Below example demonstrates the usage of Core color as the text color.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; function App() { return ( <> <div style={{ padding: 20, textAlign: "center" , color: "green" }}> <h1>ReactJS BluePrint Colors Core colors</h1> </div> <div> <div style={{ padding: 20, display: "flex" , flexDirection: "row" }}> <div style={{ padding: 10 }}> <h1 style={{ color: "#8E292C" }}> Red color 1 </h1> <h2 style={{ color: "#AC2F33" }}> Red color 2 </h2> <h3 style={{ color: "#CD4246" }}> Red color 3 </h3> <h4 style={{ color: "#E76A6E" }}> Red color 4 </h4> <h5 style={{ color: "#FA999C" }}> Red color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#165A36" }}> Green color 1 </h1> <h2 style={{ color: "#1C6E42" }}> Green color 2 </h2> <h3 style={{ color: "#238551" }}> Green color 3 </h3> <h4 style={{ color: "#32A467" }}> Green color 4 </h4> <h5 style={{ color: "#72CA9B" }}> Green color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#184A90" }}> Blue color 1 </h1> <h2 style={{ color: "#215DB0" }}> Blue color 2 </h2> <h3 style={{ color: "#2D72D2" }}> Blue color 3 </h3> <h4 style={{ color: "#4C90F0" }}> Blue color 4 </h4> <h5 style={{ color: "#8ABBFF" }}> Blue color 5 </h5> </div> <div style={{ padding: 10 }}> <h1 style={{ color: "#77450D" }}> Orange color 1 </h1> <h2 style={{ color: "#935610" }}> Orange color 2 </h2> <h3 style={{ color: "#C87619" }}> Orange color 3 </h3> <h4 style={{ color: "#EC9A3C" }}> Orange color 4 </h4> <h5 style={{ color: "#FBB360" }}> Orange color 5 </h5> </div> </div> </div> </> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors.core-colors
Contact Us