Open In App

React.js Blueprint Colors Core colors

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 15 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads