Open In App

React.js Blueprint Colors Core colors

Last Updated : 15 Sep, 2022
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



Similar Reads

React.js Blueprint Colors Gray scale
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Colors are important for styling the web page. Grayscale colors are different shades of gray color available to design web pages. Gray scale colors: Light-Gray: These are avail
3 min read
React.js Blueprint Colors Qualitative Color Schemes
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 Qualitative Color Schemes. Colors are a very important component used in styling a web application. The React.js Blue
3 min read
React.js Blueprint Colors Diverging Color Schemes
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. This is not a mobile-first UI toolkit. In this article, we'll discuss React.js Blueprint Colors Diverging Color Schemes. Colors are a very important component used in styling
4 min read
React.js Blueprint Colors Sequential Color Schemes
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 Sequential Color Schemes. Colors are a very important component used in styling a web application. The React.js Blueprint pr
4 min read
React.js Blueprint Colors Color schemes
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 Color schemes. Colors are a very important component used in styling a web application. The React.js Blueprint provid
4 min read
React.js Blueprint Colors Usage
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 Usage. Colors are a very important component used in styling a web application. The React.js Blueprint provides varia
3 min read
React.js Blueprint 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. Colors are a very important component used in styling a web application. The React.js Blueprint provides different t
5 min read
What are the 3 core concepts of React Redux ?
Redux is a widely-used state management library that helps in managing the state in our projects. However, it comes with its own terminologies and jargon that can be confusing for beginners. Essentially, Redux comprises of three core concepts: actions, reducers, and store. In this article, we will cover these concepts in detail and provide an examp
4 min read
How to Change the Label Colors or the Legend Colors in a Chart ?
In this article, we will discuss how can we change the label colors and legends colors in our chart using Chart.js. We can simply change some properties in the options configuration so that it shows the desired output. CDN link:&lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;Syntax:options: { plugins: { // changin the lagen
2 min read
React.js Blueprint Table JS API TruncatedFormat
React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. The React.js Blueprint Table Component allows showing the data in tabular form. The TruncatedFormat feature allows the incorporation of the long forms of data into a concise format in the table
3 min read